# 名词
1. 像素：像素是图像的基本采样单位，可以用点或 1x1 的小方块来呈现（如显示器的点距一般在0.25mm到0.3mm，可以认为是显示器的物理像素），是一个抽象概念
- 1.1. 逻辑像素：CSS 的像素单位，其尺寸大小是
相对的，也称为独立像素 - 1.2. 设备像素：设备的物理像素，其尺寸大小是
绝对的 - 1.3. DPI（dots per inch）：像素密度，表示水平或垂直方向每英寸长度的像素数目
- 1.4. PPI（pixels per inch）：像素密度，表示沿对角线每英寸长度的像素数目
- 1.5. 缩放因子（Scale Factor）/ 设备像素比（dpr）：逻辑像素相对于设备像素的放大比例，web可通过 window.devicePixelRatio 获得
- 1.1. 逻辑像素：CSS 的像素单位，其尺寸大小是
2. 分辨率：也叫做解析度，解像度。物理分辨率一定的情况下，显示屏越小图像越清晰；反之，显示屏大小固定时，物理分辨率越高图像越清晰
- 2.1. 物理分辨率：屏长的设备像素 × 屏宽的设备像素
补充： 由于液晶的显示原理与 CRT（阴极射线显像管）不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在的桌面分辨率几乎总是与显示器的物理分辨率一致。但是到了移动终端，由于高密度显示技术出现，比如苹果的Retina显示屏中，当缩放比是100%的时候，一个CSS像素占的面积是4个设备像素的面积，即一个CSS像素横向宽度覆盖了2个设备像素的宽度。缩放比为100%时一个CSS像素占多少个设备像素是由设备像素比（dpr）决定的，dpr为2，则占两个，dpr为3则占三个。dpr的取值可以通过
window.devicePixelRatio查看。
| 单位 | 含义 |
|---|---|
| px（相对单位） | 相对于桌面分辨率而不是视窗大小：通常为1个点，一般为1/96英寸 |
| em（相对单位） | 相对于父元素的字体大小，若父元素 font-size 为 16px，那么 1em 就为 16px |
| %（相对单位） | 相对于父元素，正常情况下是通过属性定义自身或其他元素 |
| rem（相对单位） | 相对于根元素字体大小，若根元素（html）font-size 为 16px，那么 1rem 就为 16px |
| ex（相对单位） | 相对于小写字母 “x” 的高度 |
| vw（相对单位） | 相对于视窗的宽度：视窗宽度是 100vw |
| vh（相对单位） | 相对于视窗高度：视窗宽度是 100vh |
| vmin（相对单位） | vw 和 vh 中较小的那个 |
| vmax（相对单位） | vw 和 vh 中较大的那个 |
| ch（相对单位） | 1ch 的大小和字母 o 的宽度相等 |
| in（绝对单位） | inch，表英寸 |
| cm（绝对单位） | centimeter，表厘米 |
| mm（绝对单位） | millimeter，表毫米 |
| pt（绝对单位） | 磅，1/72英寸 |
| pc（绝对单位） | 12点活字，或1/12点 |