移动端布局
移动端布局和PC端有所区别：
1) 单独制作移动端页面（主流）
- 流式布局（百分比布局）
- flex弹性布局（推荐）
- less+rem+媒体查询布局
- 混合布局
2) 响应式页面兼容移动端
- 媒体查询
- bootstrap
移动端布局需要了解几个概念：
1. meta视口标签
<!-- 视口的设置：device-width表示视口的宽度和所用设备保持一致，默认的缩放比例和PC端一致，user-scalable=no表示用户不能自行缩放 --> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimun-scale=1.0">
| 属性 | 解释说明 |
| width | 宽度设置的是viewport宽度，可以设置device-width特殊值 |
initial-scale
|
初始缩放比，大于0的数字 |
maximum-scale
|
最大缩放比，大于0的数字 |
minimun-scale
|
最小缩放比，大于0的数字 |
user-scalable
|
用户是否可以缩放，yes或no(1或0) |
标准的viewport设置：
- 视口宽度和设备保持一致：content="width=device-width
- 视口的默认缩放比例为1.0：initial-scale=1.0
- 不允许用户自行缩放：user-scalable=no
- 最大允许的缩放比例为1.0：maximum-scale=1.0
- 最小允许的缩放比例为1.0：minimun-scale=1.0
2. 物理像素&物理像素比：
- 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了的，比如苹果6/7/8 是750*1334
- 但是在开发的时候1px不是一定等于1个物理像素的
- PC端页面，1个px等于1个物理像素点，但是移动端就不尽相同
- 一个px的能显示的物理像素点的个数称为物理像素比或屏幕像素比
3. 二倍图：
由于在移动设备上，物理像素比并不是1：1的，因此图片如果像在PC端那样直接使用的话就会出问题
1) 假设我们需要一个50*50像素（css像素）的图片，直接放到iPhone8设备上，里面会放大2倍，变为100*100，图片就会变得模糊
2) 正确的做法是，放一个100*100的图片，然后手动把这个图片缩小为50*50像素（css像素）
3) 因此在移动布局中，我们准备的图片要比实际需要的图片大小大2倍。这种方式就是二倍图
4. CSS3盒子模型：box-sizing
- 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
- CSS盒子模型：盒子的宽度 = CSS中设置的宽度width里面包含了border和padding
也就是说，在CSS的盒子模型中，padding和border不会撑大盒子
/* CSS3盒子模型 */ box-sizing: border-box; /* 传统盒子模型 */ box-sizing: content-box;
移动端可以全部使用CSS3模型，PC端如果完全需要兼容，就需要用传统的盒子模式，如果不考虑兼容性，就可以选择CSS3模型。
了解了这些概念之后，接下来介绍的事移动端的四个布局方式：
