rem好像也是一个相对大小的值,它是相对于根元素<html>,比如假设,我们设置html的字体大小的值为 html{font-size: 87.5%;}(也就是14px,这是twentytwelve默认主题里的设置)。然后其他的字体就是将你要的值除以14得到的值;比如默认的twentytwelve主题大小是960px;换算成rem就是960/14=68.57142857142857rem(我这个用电脑的计算器计算的,比默认的更精确,嘿嘿);padding的24px也就是24/14=1.714285714285714rem(当然还是比css文件里的精确),以此类推。

上面的14是个变量,相对于你对根元素html字体大小的设定,如果你设定的是62.5%,那除数就变成10了,对照表如图:

上面的14是个变量,相对于你对根元素html字体大小的设定,如果你设定的是62.5%,那除数就变成10了,对照表如右图:

用这个rem单位的好处有啥我不知道,不过如果你根元素的字体大小选62.5%,那px和rem之间的换算就是px直接除以10就得到rem了,这比em简单多了,到现在我都没搞清楚em和px之间是如何换算的。

另外rem在ie8及ie8以下的版本不支持外其他浏览器都支持,如果你要考虑ie8及一下,可以像twentytwelve默认文件那样设置个px再设置个rem就可以了。

CSS中的rem的换算的更多相关文章

  1. CSS中的 REM PX EM

    px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的 em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. ...

  2. CSS中em,rem的区别

    首先这两个单位一般用在移动端 不太清楚得求证  再记录 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字 ...

  3. CSS 中的rem,em,vh,vw一次说清楚

    关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...

  4. CSS中的rem

    为什么会使用rem呢?主要还是浏览器和设备的大小不一. 这样就涉及到页面布局的不统一啦,先说说pc中的多栏布局吧,多栏布局有三种基本的实现方式:固定宽度.流动.弹性,下面我们就分别说说这三种布局吧. ...

  5. CSS中px,em,rem,pt的区别及四者换算?

    本文章重要说明px,em,rem,pt的区别以及四者之间的换算. em单位有如下特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小. 我们在写CSS的时候如果要用em为单位,需要注 ...

  6. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

  7. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  8. CSS中单位px和em,rem的区别

    PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  9. css中的px、em、rem 详解

    概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...

随机推荐

  1. 1.1、MyEclipse自定义注释

    一.修改进入路径: Window->Preference->Java->Code Style->Code Template->Comments 二:编辑自定义注释 文件  ...

  2. 【Sorting Collection】

    排序集锦 各种排序算法,总结一下,一直在遗忘...... [冒泡排序] 就是下面这个鬼啦: c实现代码(升序): #include<stdio.h> void BubbleSort(int ...

  3. Block使用

    1.对block的理解 >  block是iOS4.0之后出现的,是仿照java中匿名函数所创造的,它是c级别的语法,效率比协议-代理高 >  block的是一个匿名函数(没有名字的函数) ...

  4. SQL查询某个时间段共多少条数据

    select COUNT(*) from (表名) where (时间字段)between '2012-05-01 00:00:00' and '2012-05-31 23:59:59' 获取ASP. ...

  5. 08-linux 其他知识

    linux其他知识点 1-防火墙- iptables原理 2- 本部分属于一步一步学习大数据系列之 Linux 的章节,欢迎订阅更多文章 更多内容请参考:一步一步学习大数据系列介绍

  6. 本地mysql打不开的解决方法

    今天打开本地mysql的数据库,却一直打开报错.错误代码是10061. 让同事过来一看,发现是自己的mysql服务器并未启动.右下角任务管理器的mysql服务器为红色未启动状态.

  7. CSS的5种常用的垂直居中的方法

    1.绝对定位上下百分之五十然后上外边距做外边距都是他的宽高的一半 #child{ width: 200px; height: 150px; position: absolute; left: 50%; ...

  8. JS验证只能输入数字,数字和字母等的正则表达式

    JS判断只能是数字和小数点 0.不能输入中文1)<input onpaste="return false;" type="text" name=" ...

  9. 保存emoji到数据库

    /// <summary> /// <summary> /// 字符串转Unicode /// </summary> /// <param name=&quo ...

  10. VC++ GetModuleFileName()获取路径字符串中带波浪线~

    GetModuleFileName()获取的字符串中带波浪线,不是完整的路径显示. 原因:获取的是短路径,进行了缩写 解决:还原长路径 TCHAR }; GetLongPathName( strTem ...