CSS 屏幕知识

屏幕（screen）

前面讲响应式就是响应屏幕尺寸，那么屏幕尺寸如何衡量呢？主要从尺寸单位，设备独立像素和像素密度等角度考虑。

物理尺寸（Display size ／Physical size）

屏幕物理尺寸，指根据屏幕对角线（diagonal）测量的实际物理尺寸，就像我们通常说的屏幕是多少寸的，是 5.1 还是 5.5，平板是 10.1，电视是 42 还是 37 寸，这里的寸都指（英寸），而且是以对角线长度计量的。

对角线长度，则可以根据三角公式，由宽和高计算得出：

逻辑尺寸（Logic size ／Display resolution）

和屏幕物理尺寸相对的则有逻辑尺寸概念，或者叫它展示分辨率（resolution），而和物理尺寸以长度 inch 为单位不同，逻辑尺寸则以像素（pixel）为单位计量。

Dimension

和物理尺寸以对角线为方向计量屏幕大小不同的是，逻辑尺寸分别从横向（宽），纵向（高）两个方向表示屏幕的尺寸：width，height。以一台 1024 × 768 分辨率的笔记本为例，这表示设备屏幕的宽是1024像素，高为768像素。

物理像素（device pixel）

物理像素，也叫设备像素，实际像素，在计算机数字图像中，一个像素（pixel）或一个点（dot）是在一个光栅图片（raster image）中的一个物理点，它是图像在屏幕上展示的的最小可控制元素。

所谓的光栅（raster image）或位图（bitmapped image）图片，是指将图像定义为由点（或像素）组成，每个点（或像素）可以由多种色彩表示，包括 2、4、8、16、24 和32位色彩。例如一幅 1024×768 分辨率的 32 位彩色图片，其所占存储字节数为：1024×768×32/(8*1024)=3072KB（一字节等于8位）。

如图，将屏幕放大至一定程度，可以看见是由很多个点（或像素）组成，屏幕上的这些一个一个的点（或像素）就是我们说的物理像素，而像素数量的不同及每个像素的不同色彩表示就构成图像展示，决定它的视觉表现。

CSS 像素（CSS Pixel）

除了前面介绍的物理像素，还有一种像素经常被提及，那就是 CSS 像素，也作逻辑像素，虚拟像素，它仅仅是描述图像单元信息的概念，通常描述图像中某一个小方框所需要展示的颜色值，而这一些列方框点合起来就能描述一幅图像，web 编程中用来度量网页内容尺寸或位置的就是这个抽象单位。

分辨率（resolution）

分辨率通厂都是指设备分辨率，即设备屏幕上显示的物理像素总和，以一台 1024 × 768 分辨率的笔记本为例，这表示设备屏幕的宽是 1024 物理像素，高为 768 物理像素，它展示的像素总数就是 1024*768。

像素密度（Pixel density）

屏幕上每英寸（PPI，Pixel per inch）或每厘米（PPCM，Pixel per centimeter）上拥有的物理像素（或点）的数量，称为像素密度，也作屏幕密度，计算公式为：

pixel density(pd) = 屏幕宽度物理像素 ／ 屏幕宽度英寸；

如一个15英寸（对角线）大小的设备，有一个 12 英寸宽，9 英寸高的屏幕，并且其分辨率为 1024*768 像素，则其像素密度则大概为 85PPI：

pd = 1024 ／ 12 ～= 768 ／ 9 ～= 85PPI

当然横纵方向上的像素密度并不总是相同的，如将上面例子的分辨率改为 1280×1024，则：

1. 横向：pd = 1280 / 12 ~=107PPI;
2. 纵向：pd = 1024 / 9 ~= 114PPI;

分辨率转换为像素密度

根据屏幕分辨率计算得出像素密度公式，如：

1. w_p：分辨率横向像素数；

2. h_p：分辨率纵向像素数；

3. d_p：对角线分辨率像素数；

4. di：对角线物理尺寸（inch）；

5. V_pd：像素密度，单位为 PPI；

密度等级划分

为简便起见，Android 将所有屏幕密度分组为六种通用密度： 低、中、高、超高、超超高和超超超高。而低密度屏幕在给定物理区域的物理像素少于高密度屏幕。

点密度（dots per inch）

另外我们可能还听过点密度（dots per inch，dpi），它和前面介绍的像素密度相似，通常可以交叉使用，只是描述领域不同，像素（pixel）通常在计算机视觉显示领域使用，而点（dot）则主要在打印或印刷领域中使用。

设备独立像素（dp／dip）

设备独立像素（device independent pixel，称为dp或dip），也叫密度无关像素，是基于屏幕物理密度的抽象单位。首先由Google提出适配众多Android设备屏幕的抽象单位。在定义 UI 布局时可以使用的虚拟像素单位，表示布局维度或位置。

它是一个基于计算机坐标系统的物理度量单位，并且可以将物理像素抽象为虚拟像素以便在应用中使用，然后计算机内部系统可以将应用中使用的虚拟像素转换为实际物理像素。

这中抽象使得移动设备可以在不同屏幕缩放展示信息和用户交互界面，而内部图像系统可以将应用中的抽象像素度量转换为实际像素度量，因此应用可以直接使用抽象像素，而不用编码处理大量的物理像素差异化的设备。通常，安卓设备假设“中等”密度屏幕设备独立像素基准为：

一个设备独立像素（dp/dip）等于160 dpi（或 PPI） 屏幕上的一个物理像素，即等于1 / 160英寸。

而 Windows 则定义一个设备独立像素为 96dpi 屏幕上的一个物理像素，即 1dp 等于1 / 96英寸；Apple 系统则默认一个设备独立像素为 72dpi 屏幕上的一个物理像素。系统运行时，根据当前屏幕的实际密度以透明方式处理 dp 单位的任何缩放 。

计算设备独立像素

如何计算某一设备的设备独立像素呢？根据上面介绍可以得到 dp 和 inch 的如下等式：

1. ratio：即设备系统指定的默认比例;
2. inch：物理尺寸，英寸；

所以可以得到 dp 和物理像素的转换关系：

1. V_pd：设备像素密度；
2. PPI*inch：pixel/inch * inch = pixel;

如，当屏幕密度为 240dpi（或 PPI），即V_pd = 240时，1 dip 则等于1.5个物理像素（pixel）。

设备像素比（dpr）

关于物理像素，设备独立像素或CSS像素，有一个很常见的概念，设备像素比（device pixel ratio，dpr），它描述的是使用多少实际像素渲染一个设备独立像素，它的计算方式为：

1. N_dp：设备屏幕实际像素数；
2. N_px：屏幕设备独立像素数（PC 端通常等于 CSS 像素数）；
3. dpr：设备像素比；

在浏览器中，我们可以使用 window.devicePixelRatio 获取其 dpr 值，dpr 更高的设备屏幕会使用更多物理像素展示一个设备独立像素，所以其效果更细腻，更精致。如在一个 dpr=2 的设备上，1个设备独立像素需要使用4个物理像素展示，因为宽高各为2倍。

设备独立像素与 CSS 像素

上一小节介绍的设备像素比（dpr），通常指物理像素和设备独立像素的比例，我们知道，CSS 像素最终是需要转换为物理像素展示的，那么CSS像素如何对应物理像素呢？

1. 根据前文设备独立像素小节所介绍，在具体设备上，设备独立像素与物理像素的比例是固定的；
2. 在PC端，通常设备独立像素和 CSS 像素比例是 1:1，CSS 像素能以正常比例转换为物理像素展示；
3. 在移动端，为了更好的展现页面，默认情况下会进行缩放，这时设备独立像素和 CSS 像素比例并不是 1:1，所以 CSS 像素与物理像素的比例就变了，所以我们看到的效果就变了；
4. 当我们使用 viewport meta 明确设置视口 width 为理想视口时，视口宽度单位为设备独立像素，同时设置 intial-scale=1.0 即表明将CSS像素和设备独立像素比例设置为1.0，那么CSS像素到物理像素的转换就能很好的展现我们的UI了。

UI 度量（UI Dimension）

计量屏幕或屏幕内某一区域大小时，我们可以说长，宽多少寸，但是寸只是一个物理长度概念，而在开发UI界面时，由于需要适配诸多不同设备，所以可衡量，可比较的UI度量则需要使用数字加抽象计量单位，我们可以称之为 UI 维度（UI Dimension）。

A dimension is specified with a number followed by a unit of measure

维度使用一个数字加上一个度量单位声明，如 100px，10pt，10in，10dp 等。

英寸（in）

Inches - Based on the physical size of the screen.

基于屏幕物理尺寸的度量单位 in。

UI 像素（px）

UI 像素 px，是一个相对单位，与之相对的是设备像素（device pixels）。一个 px 在不同设备上可能对应不同的物理像素数或（点），这取决于设备像素比（device pixel ratio）。开发页面时，经常使用该单位定义 UI 的布局和内容尺寸，文字大小，可以在浏览器中实现像素展示良好的UI界面。

但是由于不同设备上使用px单位时不会根据设备屏幕大小进行自适应，尤其是 PC 和移动端差别比较大，所以一般响应式界面较少用 px 单位。

磅（pt）

磅 pt，即 point，是印刷行业常用单位，等于 1/72 英寸，它是长度单位，是绝对大小，而 px 则是相对大小。

px 与 pt

前面说了，px 是相对大小，pt 是绝对大小，所以在不同设备上，他们的关系可能不同，以 Android 设备为例，一个 dp 等于 160dpi 屏幕上的一个物理像素，则：

1dp = 1 / 160 inch 

而结合前面介绍的pt单位：

1pt = 1 / 72 inch 

对于 240PPI 的屏幕，则：

1dp = 1 / 160 inch = 240 / 160 px = 1.5 物理像素；
1px = 1 / 240 inch；
1pt = 0.35 物理像素 = 0.35 / dpr CSS 像素(px)；

em

em 是在 web 文档中使用的一个缩放单位，1em 等于最近父元素的 font-size 字体尺寸，如最近父元素字体为 14pt，则 1em=14pt。使用 em 单位表示的尺寸可以较好的在多终端浏览器进行样式适配。

rem

rem 也是一个缩放单位，与 em 相似，都是基于字体尺寸，不同的是 rem 是基于文档根元素字体尺寸，而与父元素字体尺寸无关，如文档根元素 font-size 属性为 12pt，而最近父元素字体为 14pt，则 1rem=12pt。

由于 rem 基于根元素字体大小计算，所以在文档中，任何一处使用 rem 单位计算基准都一样，使得尺寸计算得到统一，而前面的 em 则在文档中都是基于最近父元素 font-size 属性值，这说明在 font-size 值不同的父元素中使用 em 单位，计算并不能统一，这也是为什么在目前的 PC，移动端多设备适配方案中，rem 比 em 更常见。

百分比（%）

还有一个 % 百分比单位，基于最近父元素的相关属性尺寸，乘以分配的百分比数，如父元素 width 为 10pt，font-size：14pt，则 width：10% 就是 1pt，font-size: 110% 为 15.4pt（浏览器实际渲染会化为整数渲染）。特别注意的是 margin、padding 属性值为百分比时，是基于当前元素 width 值的。

% 单位也是一个缩放单位，所以也常用于样式适配。