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. 内核编译报错Fedora20(友善)

    首先说明我的宿主机环境:Fedora20 64位,开发板是友善Smart210(S5PV210——Cotex-A8)!!!马上入题! 按照开发板的用户手册来编译内核,一直报这个错误:/opt/Frie ...

  2. Thinkphp 第二篇：如何将一个外部项目导入到Thimkphp环境中

    一:到这篇博文的开头,假设我们的Xmapp环境已经搭建好了,并且成功的安装了Thinkphp的环境了. 1:Xmapp安装成功截图: 2:Thinkphp安装成功截图: 二:Thinkphp中各个文件 ...

  3. Makefile文件学习总结

    Makefile文件相当于是一种脚本编程语言,目的是实现自动化编译.编写makefile文件的过程中可以使用变量.控制结构和函数等一般编程语言的特性. Makefile文件的组成内容.makefile ...

  4. C#发送邮件异常：根据验证过程,远程证书无效

    今天在做发送邮件功能时,开始用qq邮箱和163邮箱都可以正常发送,后再改用我公司的邮箱和smtp时竟然报错了. 异常提示-----"根据验证过程,远程证书无效",后来通过查询资料解 ...

  5. html_随笔

    1 <h1>  </h> 标题 2 <p> </p> 段落 3 <br /> 换行 4 <!-- ...--> 注释 5 < ...

  6. 算法练习_图的连通性问题（JAVA）

    一.问题 1.问题描述: 有n个点(1...n),输入整数对(8,9),表示8,9点之间存在相互的连接关系. 动态连通性问题--编写一段程序过滤掉所以无意义的整数对,即为在不破坏图连通性的前提下,以最 ...

  7. C# IComparable接口、IComparer接口和CompareTo(Object x)方法、Compare()方法

    在项目中经常会用到字符串比较,但是有时候对字符串的操作比较多,规则各异.比如有的地方我们需要用排序规则,有的地方需要忽略大小写,我们该如何写一个比较容易操作的比较方法呢?重新实现IComparer接口 ...

  8. KRPano资源分析工具使用说明（KRPano XML/JS解密 切片图批量下载 球面图还原 加密混淆JS还原美化）

    软件交流群:571171251(软件免费版本在群内提供) krpano技术交流群:551278936(软件免费版本在群内提供) 最新博客地址:blog.turenlong.com 限时下载地址:htt ...

  9. remove mysql

    apt-get --purge remove mysql-server mysql-client mysql-common apt-get autoremove rm -rf /etc/mysql r ...

  10. bug 汇总

    联通营业厅充话费无法在线支付,chrome Python 64位安装包 win7 64 windows 10 右键菜单 Android studio IE11 layout