移动端适配，自适应布局的各种方案与最佳实践

知识预备：

1. 像素

像素分为css像素和物理像素（设备像素）
在css和js中写的px单位，都属于css像素；
物理像素只和设备或者说硬件有关，同样尺寸的屏幕，设备的密度越高，物理像素越多。
细节可参考：你真的了解css像素嘛？

2. 视口

广义的视口，是指浏览器显示内容的屏幕区域，狭义的视口包括了布局视口、视觉视口和理想视口
在移动端中，理想视口或者说分辨率跟物理像素之间有什么关系呢？
DPR（Device pixel ratio）设备像素比： 1 DPR = 物理像素／分辨率
不缩放的情况下，1 CSS像素 = 物理像素／分辨率 = 1 DPR
在移动端的布局中，我们可以通过viewport元标签来控制布局

    <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

细节可参考：viewport详解

3. 自适应

在pc端的布局视口通常情况下为980px，移动端以iphone6为例，分辨率为375 * 667，也就是说布局视口在理想的情况下为375px。

    PC端： 1 CSS像素 = 物理像素／分辨率 = 750 ／ 980 =0.76 px

    iphone6：1 CSS像素 = 物理像素 ／分辨率 = 750 ／ 375 = 2 px

也就是1个CSS像素可以表示的物理像素是不同的，因此如果在css中仅仅通过px作为长度和宽度的单位，造成的结果就是无法通过一套样式，实现各端的自适应。

自适应方案：

一、 媒体查询

使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。
举例：

@media screen and (max-width: 960px){
   
    body{
   
      background-color:#FF6699