移动端适配方案总结

一、适配方案：

1、流式布局；2、rem自适应布局；3、felx布局；4、响应式布局

二、适配方式

1、流式布局：又称百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比，根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充，是移动Web开发使用的比较常见的布局方式。（例如：京东首页布局）

2、rem自适应布局：rem 是相对于 html节点的 font-size来做计算的，em参考自己的font-size，也可能是继承得来的。需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位（rem只适用于固定尺寸）。（例如：魅族移动端页面布局）

3、flex布局：又称弹性布局，伸缩布局。父容器设置为display:flex; 子容器自动拥有伸缩容器的属性。关于flex布局的详细讲解，可以参考阮一峰老师的Flex 布局教程。（例如：天猫首页布局）

4、响应式布局：一个网站能够兼容多个终端，使用媒体查询（@media），通过查询设备的宽度来执行不同的 css 代码，最终达到界面的配置。

三、补充

1、物理像素和物理像素比：物理像素（分辨率）指的是屏幕显示的最小颗粒，出厂就设置好的，是物理真实存在的。PC端页面，1px等于1个物理像素。在移动端，一个px能显示的物理像素的个数，称为物理像素比或屏幕像素比。

2、标准viewport设置：视口宽度和设备保持一致；视口的默认缩放比是1.0；不允许用户自行缩放；最大允许的缩放比例1.0；最小允许的缩放比例1.0。

3、淘宝页面实现：采用rem + viewport 缩放的方式。其viewport设置为非标准设置，视口的默认缩放比是0.5；不允许用户自行缩放；最大允许的缩放比例0.5；最小允许的缩放比例0.5。