移动端开发随笔

1.纵向的单位剋以全部使用px，横向使用rem

2.devicePixelRatio：像素比，目前高清屏，普遍都是2

淘宝方案：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

注：淘宝的设计稿是基于750的横向分辨率

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

（2）动态计算html的font-size： font-size = deviceWidth / 10

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

（3）布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
拿淘宝来说的，他们用的设计稿是750的，所以html的font-size就是75，如果某个元素是150px的宽，换算成rem就是150 / 75 = 2rem

（4）font-size可能需要额外的媒介查询，并且font-size不使用rem，这一点跟网易是一样的。

（5）当设备竖着时横向物理分辨率大于1080时，html的font-size就不会变化了，原因也是一样的，分辨率已经可以去访问电脑版页面了。

 

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