移動端開發隨筆

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