移动适配

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