§ 基本概念

首先了解下面这些基本概念(术语)

视窗 viewport

简单的理解,viewport是严格等于浏览器的窗口。在桌面浏览器中,viewport就是浏览器窗口的宽度高度。

但在移动端设备上就有点复杂。移动端的viewport太窄,为了能更好为CSS布局服务,所以提供了两个viewport:虚拟的viewportvisualviewport和布局的viewportlayoutviewport。

物理像素(physical pixel)

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

设备独立像素(density-independent pixel)

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

CSS像素

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

屏幕密度

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

设备像素比(device pixel ratio)

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

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

在JavaScript中,可以通过window.devicePixelRatio获取到当前设备的dpr。

meta标签

<meta>标签有很多种,而这里要着重说的是viewport的meta标签,其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大。在开发移动端页面,我们需要设置meta标签如下:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Media Query

Media Query 查询的不是 px,而是 pt

px和pt的换算公式:

pt = 1/72(英寸), px = 1/dpi(英寸)

pt = px * dpi / 72

像素密度:DPI( Dots Per Inch )每英寸点

最初用于衡量打印物上每英寸的点数密度,就是表示你的打印机可以在一英寸内打印多少个点。DPI 值越大,打印的内容越清晰。

像素密度:PPI( Pixels Per Inch )每英寸像素

当 DPI 的概念迁移到计算机屏幕上的时候,就应该称之为 PPI ( Pixels Per Inch )。同理:PPI就是表示计算机屏幕上每英寸可以显示的像素点的数量。

PPI:每英寸像素( Pixels Per Inch ),是像素密度( pixel density )单位,即每英寸的长度中所具有的像素。

PPI 和 DPI 区别:PPI 和 DPI 经常都会出现混用现象。从技术角度说,“像素”只存在于电脑显示领域,而“点”只出现于打印或印刷领域。