一、像素概念

• 设备独立像素: 屏幕的大小，屏幕的尺寸（别名叫点，是个单位），获取：window.screen.width
• 设备像素：屏幕分辨率（实际放的像素值）
• 像素比：（dpr）这个值无法改变，=设备像素/设备独立像素，通过 window.devicePixelRatio 获取
• px:逻辑像素，浏览器使用的抽象单位
• dp,pt：物理像素，也就是设备无关像素
• dpr:设备像素缩放比
• 平面上：1px = (dpr 平方)* dp；维度上(横向，纵向)：1px = 2dp；

iphone5 对外的物理像素640dp * 1136dp
                           ==
                       320px * 568px

二、viewport

• 布局 viewport:ios 默认 980，为了排版正确
• 度量/视口 viewport：通过缩放，让布局 viewport 能够在视口范围内可见
• 用了缩放之后，并不是真正的缩放了，而是改变了屏幕的尺寸（设备的独立像素）
• viewport 设置了缩放比之后，最终的页面宽度是拿原来的值/比例值

三、适配方案

• 百分比：缺点：高度无法百分比设置
• 缩放比例适配方案：缺点：所有的屏幕下设备的像素都是一样的，不合适。 首先适配的难点是因为不同屏幕下设备的独立像素大小不一样，我们要想页面统一，首先最根本的是要控制所有的屏幕下获取的设备独立像素大小一样。 然后通过 scale 缩放是可以改变设备的像素大小的，所以现在要做的是不同的屏幕下通过缩放比例值，改变屏幕的设备独立像素，以 iphone6 为基准举例，然后换算其他设备要这个大小的情况，比例值的计算。
• 淘宝缩放比例适配方案: 这种适配是将屏幕的设备独立像素换算成他的设备像素的大小，也就是 ipone6 的设备独立像素为 375，换算成 750 大小，这样设备独立像素与自己的设备像素的大小就一致了，他的值也是通过 scale 去改变的
• rem 布局： 就是用屏幕的大小/16(随意) 算出一个基准值（font-size 的根节点的大小，不同的设备下，大小不一样），然后元素的大小就根据 rem 去算，如果要做一个宽高一样的元素，也可以用 rem 去做

四、meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width:设置布局 viewport 的特定值（device-width）
• initial-scale:设置页面的初始缩放
• minimun-scale:最少缩放
• maximum:最大缩放
• user-scalable:用户能否缩放

当设置布局 viewport 为 320px，里面的元素设置 350px；设备会根据页面的大小自动调整缩放比使页面在可视区范围；windonw.innerWidth/document.body.clinentWidth;

五、媒体查询

@midea 媒体类型 and (媒体特性)

• 媒体类型：screen ,print
• 媒体特性：max-width,max-height

六、移动端常用布局

• 百分比布局
• 媒体查询布局