首页 > 其他 > 详细

如何使用rem单位

时间:2016-01-12 09:55:28      阅读:362      评论:0      收藏:0      [点我收藏+]

最近搞移动端,真是被rem、em与px的换算要了老命了,看了不少文档,似乎弄明白了,这不今天用又蒙圈了。

好多文档上老是说用rem就给html设置font-size,用em就给body设置font-size

看了下bootstrap样式表,html {font-size:62.5%;}  body {font-size:14px;},其他样式略哈,就讲这两个主要的。

可惜大姐长了这么大眼睛,从昨天到今天一直把em看成了rem,导致越算越郁闷……好不说了,解释如下:

其实可以学习bootstrap的这种设置,因为在用到em和rem的时候互不影响,因为rem就是去参照你html的font-size,管你body设不设置,都与我没关系。

一、那么如果你确定要使用rem单位,就按以下三个步骤来计算:

1、确定基数:一般12px、14px比较常用,这个自己记住就行,不用写进代码里

2、html {font-size:百分数;}    百分数=基数/16  

  基数12    百分数62.5%

  基数14    百分数87.5%

3、px换算rem   公式=想要的px值/基数

  也就是说,当你设置 html {font-size:62.5%;},你想设置一个14px的外边距,换算成rem就是14px/12——1.166rem 这样子

二、如果使用em单位的时候,计算机就会自己去找你body的设置,才不会管你html是如何设置的呢

比如我们伟大的bootstrap给 body {font-size:14px;} 这样设置后,如果我想要一个14px的外边距,我就用14px/14px——1em 这样啦。

以上是我自己总结的,如有错误,欢迎大家来指正哦~~

 

如何使用rem单位

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

(1)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!