os：昨天被问到rem，当时就一头雾水，因为我写了两年js，几乎没接触过css，所以有点迷茫。px、em、rem的区别在于px的固定单位不同。em和rem都是相对单位。Em是相对于父元素的字体大小的。层次越深，em的转换就越复杂。根html的字体大小。对于响应式页面，还是用rem比较好，不同浏览器的兼容性也不错。rem适配移动端方案-方案一：html{font-size:16px!default;}box1width=设计稿上box1显示的宽度/(设计稿宽度640/屏幕宽度320)/font-size;很多文章说16计算起来比较麻烦，所以设置html{font-size:62.5%}，这样根字号就是10px，计算起来比较方便，公式还是上面的公式。然后根据不同的媒体查询设置font-size值（百分比）。@mediascreenand(max-width:1440px)and(-webkit-min-device-pixel-ratio:1.5)and(orientation:portrait){html{font-size:281.5%;}}@mediascreenand(max-width:1080px)and(-webkit-min-device-pixel-ratio:1.5){html{font-size:210.9%;}}//...@mediascreenand(max-width:320px)and(-webkit-min-device-pixel-ratio:1.5){html{font-size:62.5%;}}优点：比较通用，容易转换；缺点：多设备需要通过媒体查询进行适配，部分设备在不可用范围内不能很好适配。-方案二：（网易方案）移动端：基准值为100，拿到设计稿除以100，就是body的宽度，输入设计稿640，然后以iphone5为例，body{宽度：6.4rem}；document.documentElement.style.fontSize=document.documentElement.clientWidth/6.4+'px';因为rootfontsize是随屏幕宽度变化的，所以不需要mediaquery适配，box1{width:designdrawingbox1width/baselinevalue100};优点：通过动态根font-size适配，基本没有兼容性问题，适配更准确，转换容易。缺点：没有viewportscaling，没有适配iPhone的Retina屏幕，导致对部分手机适配不完全。-方案三（淘宝flexible）大魔王：使用Flexible实现手淘H5页面的终端适配1.引入flexible2.参考值=设计图宽度/10；例如设计图为750px，参考值为75；box1宽度=设计图box1宽度/参考值；比如设计图上的box1是150px，它是2rem；其实就是把整个设计图的宽度设置为10rem。优点：通过动态根font-size、viewpor、dpr适配，没有兼容性问题，适配准确。缺点：需要根据设计稿换算基准值，不使用sublimetexteditor插件开发时单位计算复杂。我现在做的rem转换项目使用sass函数进行rem转换，通过方案1的媒体查询完成：@functionrem($px,$font-size){//$px是需要转换的做成字号，$font-size为根字号@return$px/($font-size/($font-size*0+1))*1rem;}.box1{width:rem(100);关于每一种方案的优缺点，都可以从中了解到。感谢你的分享。
