移动端页面布局：百分比布局、rem布局

移动端页面布局：百分比布局、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。