移动适配

1.物理像素，设备像素和dpr设备像素比

2.弹性布局要记住3点：文字流式，控件弹性，图片等比缩放

移动适配方案：

1.通过媒体查询，对不同设备进行适配

缺陷：这样的适配只能针对一些范围的适配，对于页面不同大小的适配元素的不稳定性可能会不断增加适配元素，增加了工作量

2.rem

网易rem方案：

 利用rem解决的话，需要在dom加载的时候通过js改变根元素的font-size；

设置根元素的font-size=100px：document.documentElement.style.fontsize = document.documentElement.clientWidth*6.4+"px";

当页面设备width>640，令其=640

缺陷：可能有些字体大小不能通过rem设置，需要配合媒体查询固定设置字体px来完善。

淘宝rem方案：

关键设置视口大小，达到和设计稿一致：

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')

html字体大小通过动态计算来获得：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
而元素的字体大小的，就要通过计算来获得：元素大小/html的font-size=元素的rem值
注意：页面width>1080,字体大小不变
缺陷：和网易一样有些大小也要通过媒体查询来设置固定值
question：为啥元素尺寸可用rem而容器元素的font-size尺寸需要通过媒体查询

//定义一个变量和一个mixin

@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
    @{name}: @px / @baseFontSize * 1rem;
}
//使用示例：
.container {
 .px2rem(height, 240);
}
//less翻译结果：
.container {
 height: 3.2rem;
}

参考：http://www.cnblogs.com/lyzg/p/4877277.html?utm_source=caibaojian.com