移动端布局那点事

作为前端,在今天来说,移动端布局必须是一件必知必会的事情,重要程度不言而喻!这里我总结了同一案例下不同布局的写法(原理就不再赘述,直接右键查看源代码即可),方便大家回忆。

百分比布局

特点:宽度百分比、高度写死(750的设计稿下一般除以2)。
缺点:高度或文字很难自适应。

举例

Flexible 布局

特点:宽度弹性布局、高度写死。
缺点:高度或文字还是很难自适应。
优点:灵活、简洁。

举例

REM 布局

原理:不同尺寸屏幕下给根元素设置不同的文字大小(利用媒体查询或JS),宽、高、间距…都统一使用 REM 单位。
使用:量取到的设计稿尺寸除以根元素字体大小(基准值)即可,例如使用 flexible.js,150px 用 rem 表示就是 2rem。
优点:高度和文字可以自适应。

注意 em 是相对于当前元素的字体大小(如果当前元素没有设置字体大小那就是继承过来的大小)的单位。

举例

响应式布局

原理:利用 bootstrap 的栅格系统(核心还是媒体查询),不同尺寸下设置不同的样式,实现 PC 和移动端布局使用同一套代码!
场景:适用于相对简单的页面,复杂页面下的响应式开发成本太高。