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

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

1 弹性盒布局（百分比布局）

例如，拉勾网、天猫首页。

好处：充分发挥大手机的优势——显示内容越多；缺点：屏幕过大，间距过大，比例失调。

特点：

- 顶部与底部的bar不管分辨率怎么变，它的高度和位置都不变；

- 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息都位于条目的左边，薪资都位于右边。

2 rem布局（等比缩放布局）

例如，网易、淘宝首页。

 

拿到640px设计稿，iphone5开发（320px）：

 

百分比布局：

第一种：

若是也想通过js代码控制，将html字体大小那句话删掉即可，量出来多少是多少。

第二种：量出来数字除以2。

 

rem布局：

 

第一种：如果你拿到的640px的设计稿，iphone5开发，量出来是多少px即多少px，加上上面那段js代码。此时会发现html的字体大小为64px，那么将页面中除了字体以外的px都改成rem。