一、英寸
一般用英寸描述屏幕的物理大小。如苹果SE 4英寸，苹果XS 6.5英寸，电脑显示器的22英寸
上面的尺寸都是屏幕对角线长度。英寸和厘米的换算：1英寸 = 2.54 厘米
二、分辨率
2.1 像素
像素即一个方块，具有特定的位置和颜色。像素可以作为图片和电子屏幕最小组成单元
通常我们所说的分辨率有两种，屏幕分辨率和图像分辨率。
2.2 屏幕分辨率
屏幕分辨率指一个屏幕由多少个像素点组成。
iPhone XS Max 和 iPhone SE的分辨率分别为 2688 x 1242和1136 x 640。这表示手机分别在垂直和水平上所具有的像素点数。
当然分辨率高不代表屏幕就清晰，屏幕的清晰程度还与尺寸有关。
2.3 图像分辨率
图片分辨率指一张图片由多少个像素点组成。
比如一张图片的分辨率为800 x 400。这表示图片分别在垂直和水平上所具有的像素点数为800和400。同一尺寸的图片，分辨率越高，图片越清晰。
三、设备独立像素
实际上，上面我们描述的像素都是物理像素，即设备上真实的物理单元。
设备独立像素简称DIP，与设备无关的逻辑像素，代表可以通过程序控制的虚拟像素。
一个设备独立像素里可能包含1个或者多个物理像素点，包含的越多则屏幕看起来越清晰
下面举个例子：
iPhone 3GS 和 iPhone 4/4s 的尺寸都是 3.5 寸，但 iPhone 3GS 的分辨率是 320x480，iPhone 4/4s 的分辨率是 640x960
这意味着，iPhone 3GS 有 320 个物理像素，iPhone 4/4s 有 640 个物理像素
如果我们按照真实的物理像素进行布局，比如说我们按照 320 物理像素进行布局，到了 640 物理像素的手机上就会有一半的空白，为了避免这种问题，就产生了虚拟像素单位
我们统一 iPhone 3GS 和 iPhone 4/4s 都是 320 个虚拟像素，只是在 iPhone 3GS 上，最终 1 个虚拟像素换算成 1 个物理像素，在 iphone 4s 中，1 个虚拟像素最终换算成 2 个物理像素
至于 1 个虚拟像素被换算成几个物理像素，这个数值我们称之为设备像素比，也就是下面介绍的dpr
3.1 设备像素比
设备像素比device pixel ratio简称dpr，即物理像素和设备独立像素的比值。
计算公式如下：
当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素
当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素
当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素
3.2 移动端开发
在开发中样式单位其实都使用的设备独立像素，UI给我们的原型图一般基于ipnone6的像素给定的。
在写css时，用到最多的单位是px，即css像素。当页面缩放比例为100%时，一个css像素等于一个设备独立像素
页面的缩放系数 = CSS像素 / 设备独立像素
四、视口
视口的概念通常用于移动端。一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口，它们在屏幕适配中起着非常重要的作用。
4.1 布局视口
布局视口是网页布局的基准窗口。在 PC 上，布局视口就等于当前浏览器的窗口大小；在移动端，布局视口被赋予一个默认值，以 iPhone6 为例，其布局视口的宽度为 980px。
可以通过调用 document.documentElement.clientWidth/clientHeight 来获取布局视口大小。在进行 @media 媒体查询的时候，查询的宽度值也是布局视口的宽度值。
4.2 视觉视口
视觉视口(visual viewport)：用户通过屏幕真实看到的区域。
可以通过调用 window.innerWidth/innerHeight 来获取视觉视口大小
4.3 理想视口
网站页面在移动端展示的理想大小
可以通过调用windnow.screen.width / height来获取理想视口大小。
通过 meta viewport 设置布局视口
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
viewport 有以下字段可配置：
4.5 移动端适配
为了在移动端让页面获得更好的显示效果，我们必须让布局视口、视觉视口都尽可能等于理想视口。
device-width就等于理想视口的宽度，所以设置width=device-width就相当于让布局视口等于理想视口。
由于initial-scale = 理想视口宽度 / 视觉视口宽度，所以我们设置initial-scale=1;就相当于让视觉视口等于理想视口。
这时，1个CSS像素就等于1个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似。
