移动端px和rem的换算

今天又遇到了移动端rem的计算，感觉自己弄了很多遍，还是迷迷糊糊，今天参考了很多网站上的文章，重新整理一遍：

看根元素html里面设置的font-size是多少（50）px，即认为1rem为多少（50）像素

rem的优点是所有的元素大小都是一个倍数，相对于根元素的倍数，所以只需要修改根元素，所有的元素都可以变化。可以适应不同的设备分辨率。
缺点是IE6、IE7、IE8不支持这个标签。

指定了 1rem为50px
如果设计图为750px，一个div高为64px，手机里实际应该为32px，
用rem表示就是32px/?rem = 50px/1rem，即：32/50等于0.64rem
方便计算就直接：64px的为0.64rem，即缩小100倍

1rem等于多少px呢？
1rem等于html根元素设定的font-size的px值，假如我们在css里面设定下面的css：
html{ font-size:14px }
那么后面的CSS里面的rem值则是以这个14来换算，例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:3乘以14=42px，height:2.5乘以14=35px，
同理，假如一个设计稿为宽度42px,高度为35px，则换成成rem，则是42/14=3rem，35/14=2.5rem。

（如果设计图为350px，一个div高为64px，手机里也是64px，
用rem表示就是64px/?rem = 50px/1rem，即：64/50等于1.28rem
方便计算就直接：64px的为1.28rem，即缩小50倍）

之后碰到效果图px转换为rem的，就除以根元素设置的多少（50）px，碰到是rem换算成px的，就乘以根元素设置的多少（50）px

如果你没有在根元素指定参照值，那浏览器默认就是 1rem 为 16px，如果指定了值假设为 20px，那 1rem 就为 20px。在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）

以下不建议设置

html { font-size: 62.5%;  /*16 × 62.5% = 10px*/ }
body { font-size: 1.4rem;  /*1.4 × 10px = 14px */ }
h1 { font-size: 2.4rem;  /*2.4 × 10px = 24px*/ }

有些浏览器不支持 12px 以下的字体大小，html 设置成 62.5%，或者 10px 时，已经小于12px了。所以，记住一点：如果要使用 rem 单位，html 的字体默认大小必须设置为 12px 或以上才行。