CSS 常见单位和像素物理像素（physical pixel px）物理像素又被称为设备像素，它是显示设备中一个最微小

物理像素（physical pixel px）

物理像素又被称为设备像素，它是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

设备独立像素（density-independent pixel DIP）

设备独立像素也称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。

CSS 像素

CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs

屏幕密度 (Pixels Per Inch PPI)

屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算

设备像素比（device pixel ratio DPR）

设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：

设备像素比＝物理像素 / 设备独立像素

上图中， Retina为高清设备屏幕，它的 1 个 css 像素对应了 4 个物理像素，1 个 css 像素对应 1 个设备独立像素

px

px是pixel的缩写，是像素单位，也是为影像显示的基本单位。在CSS中，px是一个相对长度单位，是相对于屏幕显示器分辨率和设备像素比而言的

em

em的单位长度是根据元素的文本垂直长度来决定的。默认 1em = 16px

<body>
    <div class="test">Test</div>
</body>

body {
    font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

<body>
    <div>
        Test <!-- 14 * 1.2 = 16.8px -->
        <div>
            Test <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                Test <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>

rem

rem 指相对于根元素的字体大小的单位;

html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;
}

.container {
    width: 70rem; // 70 * 14px = 980px
}

vh vw

vh(view height) vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px.

vmin vmax

vh和vm总是与视口的高度和宽度有关，与之不同的，vmin和vmax是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为1100px宽、700px高，1vmin会是7px,1vmax为11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会等于8px而1vmax将会是10.8px。

CSS 常见单位和像素