【干货】前端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