移动端布局

移动端布局和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模型。

了解了这些概念之后，接下来介绍的事移动端的四个布局方式：

• 移动布局之流式布局
• 移动布局之弹性布局
• 移动布局之rem
• 移动布局之响应式布局