CSS （级联样式表）是一种控制 HTML 页面样式的语言。页面样式中，控件的大小是必不可少的，那么 CSS 是怎么处理长度使得在不同的设备上都能按照我们预想的大小进行展示呢？
1. 基本概念
在介绍 CSS 如何处理长度之前，需要先介绍一些重要的概念，它们是理解问题的关键。
1.1 像素
像素是构成数字影像的最小单元，一幅数字影像由千千万万的像素构成。例如一台数码相机，它的宽有1600个像素，高有1200个像素，那么它拍出来的照片就有 1600 * 1200 = 192万个像素。目前很多手机摄像头的像素能达到一亿，用这样的手机拍出的照片也就更加清晰。
1.2 分辨率
分辨率是用来测量显示系统对细节的分辨能力，常见的单位有：dpi (点每英寸)、lpi (线每英寸) 和 ppi (像素每英寸)。其中 dpi 用于打印领域，ppi 用于数字图像显示领域。可以看到分辨率指在单位长度下，像素的数量。像素越多，对细节的分辨能力也就越强。
1.3 1080P和2K
1080p 和 2K 都是分辨率的概念，但又并不是上面介绍的单位，但可以进行转换。显示器长宽比一般为 16:9 ，业界通常把 1920*1080 的显示器（或者视频）称为 1080p，它的含义是宽有1920个像素，高有1080个像素。2K 是指宽度像素的个数接近2000个，所以严格意义来说，1080p 也可以算 2K，但目前 2K 屏幕指的是 2560*1440。
转换成 ppi 也非常容易，假设一个 2560*1440 的显示器，它大小是27寸，这里的27寸指对角线的长度。根据勾股定理，可以算出对角线的像素个数约为2937个，所以 ppi 约为108。手机屏幕的 ppi 计算方式一样，懂得了计算方式之后，就不怕厂商忽悠了。