★文章内容学习来源：拉勾教育大前端就业集训营

---

本篇学习目标：了解移动端布局技术选型

---

目录：
一、单独制作页面（主流）
二、响应式页面兼容移动端（其次）

---

一、单独制作页面（主流）

1.流式布局（百分比布局）

• 流式布局（百分比布局），也称非固定像素布局；
• 通过将盒子的宽度设置成百分比，从而根据屏幕宽度来进行伸缩，不受固定像素的限制，内容向两侧填充；
• 是移动web开发使用的比较常见的布局方式；
• 具体查看链接：

2.flex弹性布局（强烈推荐）

• 传统布局：兼容性好，当布局繁琐且布局有局限性，不能在移动端很好地布局；
• 而 flex弹性布局：操作方便，布局简单，移动端应用广泛；只不过PC端浏览器支持情况较差，IE11或更低版本不支持或仅仅部分支持。
• 具体查看链接：

3.less+rem+媒体查询

• 具体查看链接：

4.混合布局

• 以上几种方式综合。

---

二、响应式页面兼容移动端（其次）

1.媒体查询

• 具体查看链接：

2. bootstrap

• Bootstrap来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS和 JavaScript的，它简洁灵活，使得 Web 开发更加快捷。
• 中文官网∶http://www.bootcss.com/
• 官网∶http://getbootstrap.com/
• 框架∶顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。(装修公司即相当于框架，不用自己装修，装修公司有一整套方案）
• 具体查看链接：

---

下篇继续：【60】移动WEB开发(7)——布局方式常见方案①流式布局