我们知道，当把我们开发的pc端页面放在移动端展示，会出现布局错误。所以我们要做移动端适配，来让页面更合适。
首先我们先来了解一些手机屏幕和像素的相关概念。
屏幕大小
指屏幕的对角线长度，单位是英寸(inch)。常见尺寸有： 3.5寸、4.7寸、5.0寸、5.5寸、6.0寸等。
备注：1英寸(inch) = 2.54厘米(cm)
屏幕分辨率
指屏幕在：横向、纵向上所拥有的物理像素点总数。一般表示用 n * m 表示。
例如： iPhone 6 的屏幕分辨率为 750 * 1334
-
注意点:
- 屏幕分辨率是一个固定值，屏幕生产出来就确定了，无法修改！！
- 屏幕分辨率、显示分辨率是两个概念，系统设置中可以修改的是：显示分辨率。
- 显示分辨率是设备当前所用到的物理像素点数，也可以说：屏幕分辨率 >= 显示分辨率。
常见手机分辨率
| 型号 | 分辨率（物理像素点总和） |
|---|---|
| IPhone 3G / 3GS | 320 * 480 |
| IPhone 4 / 4s | 640 * 960 |
| IPhone 5 / 5s | 640 * 1136 |
| IPhone 6 / 7 / 8 | 750 * 1334 |
| IPhone 6p / 7p / 8p | 1242 x 2208 |
| IPhone X | 1125 * 2436 |
| 华为 P30 | 1080 * 2340 |
屏幕密度
又称：屏幕像素密度，是指屏幕上每英寸里包含的物理像素点个数，单位是 ppi （pixels per inch），其实这里还有另一个单位 dpi（dots per inch），两个值的计算方式都一样，只是使用的场景不同。 ppi主要用来衡量屏幕，dpi 用来衡量打印机等。
物理像素
又称：设备像素，物理像素是一个长度单位，单位是px。
1个物理像素就是屏幕上的一个物理成像点，就是屏幕中一个微小的发光物理元器件（可简单理解为超级微小的灯泡），是屏幕能显示的最小粒度。
它由屏幕制造商决定，屏幕生产后无法修改。 例如 iPhone 6 的横向上拥有的物理像素为750、纵向上拥有的物理像素为1334 ，我们也可以用：750* 1334表示。
物理像素图示：
css 像素
又称： 逻辑像素，css像素是一个抽象的长度单位，单位也是px，它是为 Web 开发者创造的，用来精确的度量Web 页面上的内容大小。
我们在编写css、js、less中所使用的都是css像素。
我代码中所写的1px（css像素），到了屏幕上到底对应几个物理像素呢？是1个css像素就对应1个物理像素(“发光的灯泡”)吗？要探讨这个对应关系，就要学习接下来的新概念：设备独立像素。
设备独立像素
设备独立像素简称 DIP 或 DP（device-independent pixel），又称：屏幕密度无关像素。
引言： 在没出现【高清屏】的年代，1个css像素对应1个物理像素，但自从【高清屏】问世，二者就不再是1对1的关系了。苹果公司在2010年推出了一种新的显示标准：在屏幕尺寸不变的前提下，把更多的物理像素点压缩至一块屏幕里，这样分辨率就会更高，显示效果就会更佳细腻。苹果将这种屏幕称为：Retina 屏幕（又名：视网膜屏幕） ，与此同时推出了配备这种屏幕的划时代数码产品——iPhone4。
我们来看一个场景：
程序员写了：width = 2px，height = 2px 的盒子，若1个css像素直接对应1个物理像素，由于iPhone3G/S 与iPhone4屏幕尺寸相同，但iPhone4的屏幕能容纳下更多的物理像素点，所以iPhone4的物理像素点比iPhone3G/S小很多，那么理论上这个盒子在iPhone4屏幕上也就会比iPhone3G/S屏幕上小很多，而事实是iPhone3G/S 和 iPhone4下这个盒子是一样大的！！！，只不过 iPhone4更加细腻、清晰。如何做到的呢？这就要靠设备独立像素。
对比：iPhone3G/S 与 iPhone4的成像效果：
设备独立像素的出现，使得即使在【高清屏】下，（例如苹果的Retina屏），也可以让元素有正常的尺寸，让代码不受到设备的影响，它是设备厂商根据屏幕特性设置的，无法更改。
设备独立像素 与 物理像素关系
- 普通屏幕下 1 个设备独立像素 对应 1 个物理像素
- 高清屏幕下 1 个设备独立像素 对应 N 个物理像素
设备独立像素 与 css像素关系
- 在无缩放的情况下（标准情况）：1css像素 = 1设备独立像素
像素比
像素比（dpr）: 单一方向上设备【物理像素】和【设备独立像素】的比例。即：dpr = 物理像素 / 设备独立像素。可以通过js获取。
window.devicePixelRatio
几款手机的屏幕像素参数，点击这里查看更多
| 型号 | 分辨率（物理像素点总和） | 设备独立像素(dip或dp) | 像素比(dpr) |
|---|---|---|---|
| IPhone 3GS | 320 * 480 | 320 * 480 | 1 |
| IPhone 4 / 4s | 640 * 960 | 320 * 480 | 2 |
| IPhone 5 / 5s | 640 * 1136 | 320 * 568 | 2 |
| IPhone 6 / 7 / 8 | 750 * 1334 | 375 * 667 | 2 |
| IPhone 6p / 7p / 8p | 1242 x 2208 | 414 * 736 | 3 |
| IPhone X | 1125 * 2436 | 375 * 812 | 3 |
| HUAWEI P10 | 1080 x 1920 | 360 x 640 | 3 |
像素之间的关系
在不考虑缩放的情况下（理想状态下）：
- 普通屏(dpr = 1)：1css像素 = 1设备独立像素 = 1物理像素
- 高清屏(dpr = 2)：1css像素 = 1设备独立像素 = 2物理像素
- 高清屏(dpr = 3)：1css像素 = 1设备独立像素 = 3物理像素
一个width为100px的盒子，那么：
1.代表100个css像素。
2.若用户不进行缩放，则对应100个设备独立像素。
3.在dpr为2的设备上，这100个css像素占据了100*2=200个物理像素（横向）。
描述一下你的屏幕：
现在以iPhone6为例，我们描述一下屏幕（横向上）:
- 物理像素：750px
- 设备独立像素：375px
- css像素：375px
紧接着的两期文章
