首页 > 技术文章 > rem单位和em单位的使用

anniey 2016-12-29 16:39 原文

今天弄了一点响应式的东西,本以为很快就可以弄好,结果还是绕晕了头,所以还是写下来方便下次看吧!

一开始我打算用百分比%来做响应式布局,后来算的很懵圈,就果断放弃了,哈哈是不是很明智。

接下来就是rem单位的出场了,用拿到的px换算就好了,是不是炒鸡简单呢。

一)rem单位使用步骤:

1、确定基数:一般10px,自己记住就行,不用写进代码里

2、html {font-size:百分数;}    

  百分数=基数/16  

  基数10    百分数62.5%

  基数14    百分数87.5%

3、px换算rem   公式=拿到的px值/基数

  也就是说,当你设置 html {font-size:62.5%;},你想给容器里的文字设置字号14px,换算成rem就是14px/10——1.4rem 这样子

  (如果自己想要测试的话,拿火狐Firebug测试,因为Chrome下字号低于12px失效哈,如果想设置小于12px的字号,Chrome也有解决方案,自己百度就好)

二)如果你使用的是em单位,请记住:

  1、用em就给body设置font-size

  2、要使用, body {font-size:14px;} 设置body,给定盒子宽度28px,则得到em 的就是   28px/14px=2em 啦。

三)总结下

  用rem就给html设置{font-size:百分数;},用em就给body设置{font-size:14px;} ;

  反正他们两个互不影响,想怎么用就怎么用。

  提醒大家,换算时千万要看准,不要算晕了。

(PS:如有错误,欢迎前来讨论哈!)

附上参考博文链接:

http://www.cnblogs.com/dreamsboy/p/5656009.html

http://www.cnblogs.com/YYvam1288/p/5123272.html

推荐阅读