os：昨天被问到关于rem的问题，当时一脸懵逼，因为写了两年js，基本没怎么碰过css，有点迷糊。

px、em、rem区别

不同于px这个固定单位，em和rem都是相对单位，em是相对父元素的font-size，层级越深，em的换算越复杂，rem，即root-em，相对于根html的font-size。做响应式页面，使用rem较好，在不同浏览器间的兼容性也好。

rem适配移动端方案

– 方案一：

html{font-size:16px !default;}
box1的宽度 = 设计稿上box1显示的宽度/(设计稿宽度640/屏幕宽度320)/font-size；

很多文章都会说16算起来较麻烦，所以设定html{font-size:62.5%}，这样根字体大小就是10px了，算起来较方便，公式还是上面的公式。
然后根据不同的媒体查询设置font-size的值（百分比）。

@media screen and (max-width:1440px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait){ 
    html { font-size: 281.5%; }
}
@media screen and (max-width:1080px) and (-webkit-min-device-pixel-ratio:1.5){ 
    html { font-size: 210.9%; }
}
// ...
@media screen and (max-width:320px) and (-webkit-min-device-pixel-ratio:1.5){ 
    html { font-size: 62.5%; }
}

优点：较为普遍性，换算也简单；
缺点：通过媒体查询需要适配多个设备，有些设备不在范围内就不能很好的适配。

– 方案二：（网易方案）

手机端：基准值为100，拿到设计稿除以100，即为body的width，入设计稿640，那就以iphone5为例，body{width：6.4rem}；

document.documentElement.style.fontSize = document.documentElement.clientWidth/6.4 + 'px';

因为根fontsize随着屏幕宽度变化，所以不用媒体查询适配，box1{width:设计图box1宽度/基准值100}；

优点：通过动态根font-size来做适配，基本无兼容性问题，适配较为精准，换算简便。
缺点：无viewport缩放，且针对iPhone的Retina屏没有做适配，导致对一些手机的适配不是很到位。

– 方案三（淘宝flexible）

大漠：使用Flexible实现手淘H5页面的终端适配

1.引入flexible

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

2.基准值 = 设计图宽度/10；例如设计图是750px，基准值就是75；
box1的宽度 = 设计图box1宽度/基准值；例如设计图上box1为150px，则为2rem；其实意思就是把整个设计图宽度设置为10rem。

优点：通过动态根font-size、viewpor、dpr来做适配，无兼容性问题，适配精准。
缺点：需要根据设计稿进行基准值换算，在不使用sublime text编辑器插件开发时，单位计算复杂。

rem换算

我现在做的项目，对rem的换算用的是sass的函数，是通过方案一的媒体查询来做的：

@function rem($px, $font-size){
  //$px为需要转换的字号，$font-size为根字体大小
  @return $px / ($font-size/($font-size*0+1)) * 1rem;
}
.box1{width: rem(100);}

关于每种方案的优势和劣势，借鉴于有你便是晴天，感谢大神分享。