移動端頁面佈局：百分比佈局、rem佈局

1 彈性盒佈局（百分比佈局）

例如，拉勾網、天貓首頁。

好處：充分發揮大手機的優勢——顯示內容越多；缺點：螢幕過大，間距過大，比例失調。

特點：

- 頂部與底部的bar不管解析度怎麼變，它的高度和位置都不變；

- 中間每條招聘資訊不管解析度怎麼變，招聘公司的圖示等資訊都位於條目的左邊，薪資都位於右邊。

2 rem佈局（等比縮放佈局）

例如，網易、淘寶首頁。

<script type="text/javascript">

// 把尺寸放大N倍（N是window.devicePixelRatio）

var wd = document.documentElement.clientWidth*window.devicePixelRatio/10;

//物理畫素*裝置畫素比=真實畫素

document.getElementsByTagName("html")[0].style.fontSize = wd + "px";

// 把螢幕的倍率縮小到N分之一（N是window.devicePixelRatio）

var scale = 1/window.devicePixelRatio;

var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';

document.getElementById("vp").content = mstr;

</script>

拿到640px設計稿，iphone5開發（320px）：

百分比佈局：

第一種：

若是也想通過js程式碼控制，將html字型大小那句話刪掉即可，量出來多少是多少。

第二種：量出來數字除以2。

rem佈局：

第一種：如果你拿到的640px的設計稿，iphone5開發，量出來是多少px即多少px，加上上面那段js程式碼。此時會發現html的字型大小為64px，那麼將頁面中除了字型以外的px都改成rem。