1、英寸：描述屏幕的物理大小，指屏幕的对角线长度；1 inch(in) = 2.52 cm
2、像素： 作为图片和屏幕的最小组成单位，有特定的位置和颜色
3、屏幕分辨率： 一个屏幕具体由多少个像素点组成； 1024 * 758 表示屏幕在水平和垂直上所具有的像素点数
4、图像分辨率：一个图片含有的像素数；800 * 400 表示图片在垂直和水平上所具有的像素点数
5、PPI(Pixel Per Inch): 每英寸包括的像素数，用来描述一个屏幕的清晰度或者一张图片的质量； ? \frac{\sqrt{水平像素点数^2+垂直像素点数^2}}{尺寸}?
6、DPI(Dot Per Inch): 每英寸包括的点数，这个点可以是屏幕像素点、图片像素点、打印机的墨点；用来描述屏幕和图片时，与PPI等价； 常用来描述打印机每英寸可以打印的点数，即打印点的密度，打印机的打印点是不规则的，打印点之间会有一定的空隙
7、物理像素：设备上真实的物理单元
8、设备独立像素(DIP或DP):用来描述不同分辨率的手机上，它们的界面元素显示元素个数，比如横向600个设备物理像素点的屏幕，可能界面中宽度显示的是300个像素点，也可以说是该屏幕的宽度是300个设备独立像素。
9、设备像素比(device pixel ratio，简称DPR)：物理像素和设备独立像素的比值；浏览器使用 window.devicePixelRatio，css中使用媒体查询 min-device-pixel-ratio，react Native 中使用 PixelRatio.get()
10、css像素：px，当页面缩放比例为 100%时，一个css像素等于一个设备独立像素
11、页面缩放系数 = CSS像素 / 设备独立像素
12、视口（viewport）：当前可见的计算机图形区域，通常与浏览器窗口相同，但不包括浏览器的UI，菜单栏等，也就是你正在浏览的文档的一部分
13、布局视口（layout viewport）：布局视口是网页布局的基准窗口，在PC浏览器上，布局视口就等于当前浏览器的窗口大小（不包括borders、margins、滚动条）。使用document.documentElement.clientWidth/ clientHeight
14、视觉视口（visual viewport）：用户通过屏幕真实看到的区域，视觉视口默认等于当前浏览器的窗口大小（包括滚动条宽度）；当用户将浏览器窗口放大了200%，浏览器窗口中的CSS像素会随着视觉视口的放大而放大，这时一个CSS像素会跨越更多的物理像素；使用window.innerWidth / innerHeight来获取视觉视口大小
15、理想视口（ideal viewport）：网站页面在移动端展示的理想大小，它的单位正是设备独立像素，页面缩放系数 = 理想视口宽度 / 视觉视口宽度；可以使用screen.width / height 来获取理想视口大小
16、meta viewport： width是以pixels（像素）为单位，定义布局视口的宽度，height是以pixels（像素）为单位，定义布局视口的高度，initial-scale是定义页面初始缩放比率，minimum-scale是定义缩放的最小值，必须小于等于maximum-scale的值，maximum-scale是定义缩放的最大值：必须大于或等于minimum-scale的值，user-scalable是一个布尔值（yes或no），其中no表示用户将不能放大或缩小网页，默认值是yes。
