移動適配

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