移动端开发随笔

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; }