移動端頁面佈局:百分比佈局、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。