前端rem单位的正确使用姿势

原文   http://www.uizph.com/post-329.html

主题  HTML

写这篇文章是因为自己被rem这个坑绊过脚，因此特意去研究了下rem这个单位。

简单阐述下px、em、rem之前的关系（其实网上很多，我这里稍微提一下）。

先抛出一个问题：为什么要选择rem？

px：像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。

em：继承父级的，假设html的font-size默认为16px，body字体大小定义为50%，那么在body里字体大小就是1em=8px了。可当你又定义了一个div，然后把字体设置成了50%，请问，现在div下的1em等于多少？因为继承了父级的值，现在这个div里的1em=4px，这么嵌套下去的话，抱歉，我数学不好！所有rem就出现了。

rem：是em的升级版，rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的，所以ie8或以下请无视（始终想不明白，为什么国人至今对微软都放弃的ie这么恋恋不舍）。

以上也算是讲清了他们之间的区别和关系，rem更多的运用于移动H5页面的适配使用。

下面来说说怎么更方便的使用rem和自己开文处提到的坑！

之前遇到的坑是这样的。浏览器默认的字体大小都是16px（注意这里），所以要使1rem=10px，那么只要在html选择器中声明Font-size=62.5%（10÷16*100%=62.5%）就可以直接使用1rem=10px单位进行换算，其实这个算法是没有错的。可是，哪里来的自信让每个浏览器默认字体都是16px？？？？反正我也不知道自信哪来。。现在Chrome默认大小可以是12px也可以是16px，那么问题来了，国内浏览器，有几个不是用的谷歌内核。所以html选择器中声明Font-size=62.5%，1rem就等于10px的换算就有点坑爹了，对于我这种一个像素都纠结的人来说，很蛋疼。这坑是我当时买书学h5的时候预留下的后遗症，现在这个毛病还有，因为快和方便 T_T!真是矛盾。。。

坑可以填。rem单位还是可以变的容易换算和精准。所以就去找了些工具和资料。

因为rem是相对html的，那么只要将html选择器设置一个绝对大小的值：比如在html选择器设置font-size：20px；那么1rem=20px（解释下为什么是20而不是其他的，首先10的倍数容易计算，那为什么不是10本身而是20？现在Chrome最小的字体是12px，所以10px是无效的，进一步就取20px）；现在是不是和效果图一个像素都不差？！！！

且要兼容手机各个分别率，使用媒体查询media 可以设置不同的大小，这样在常规的设备中都可以精准到每一个像素。

这么换算来换算去好麻烦有木有！！所有发现了下面的换算工具，妈妈再也不用说我数学题不会做了！

下面是我直接在工具复制过来的现成rem换算适配代码↓（设计稿宽度：640，字体值：20）

@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
 html,body {
 font-size:16.875px;
 }
 }
 @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
 html,body {
 font-size:15px;
 }
 }
 @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
 html,body {
 font-size:12.5px;
 }
 }
 @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
 html,body {
 font-size:11.25px;
 }
 }
 @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
 html,body {
 font-size:10px;
 }
 }
 @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
 html,body {
 font-size:9.375px;
 }
 }
 @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
 html,body {
 font-size:8.4375px;
 }
 }
 @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
 html,body {
 font-size:7.5px;
 }
 }
 @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
 html,body {
 font-size:6.46875px;
 }
 }
 @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
 html,body {
 font-size:6.25px;
 }
 }
 @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
 html,body {
 font-size:5.859375px;
 }
 }
 @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
 html,body {
 font-size:5.625px;
 }
 }
 @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
 html,body {
 font-size:5px;
 }
 }
 @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
 html,body {
 font-size:3.75px;
 }

下载是下载地址，离线和在线都有

离线版本：https://github.com/leon776/grunt-px2rem

在线版本：http://mxd.tencent.com/wp-content/uploads/2014/11/rem.html