屏幕尺寸

CSS 屏幕基础与尺寸单元详解

对页面布局原理有更深的了解，从而准确地控制好网页元素，保证按照预定的方式显示。

屏幕基础

Pixel | 像素

像素（Pixel）是数字图像的最小组成单元，它不是一个物理尺寸，但和物理尺寸存在一个可变的换算关系（物理尺寸之间的换算是固定的）。像素就是分辨率的单位，分辨率 1920px*1080px 的意思就是，在这个华为荣耀 7 的 5.2 英寸屏幕上，在竖向的高度上有 1920 个像素块，在横向的宽度上有 1080 个像素块。

PPI（Pixel Per Inch）是指每英寸包含的像素数，同时也是针对这个换算关系的一个描述性指标。其中的英寸（Inch）和厘米（cm）、毫米（mm）等尺寸一样，都属于物理尺寸。不同的显示设备会有不同的 PPI，因此，每一个像素点的物理尺寸（可以理解为你如果能拿刻度尺来量的话，得到的数值），也会因为设备的不同而存在差异。一般来说，越高的 PPI，相当于在单位物理尺寸内用了更多、更小的像素点来显示图像，因此会更清晰。

与 PPI 类似的，还有一个 DPI（Dot Per Inch），是指每英寸打印的点数，表示了打印机的打印精度，是属于印刷行业的概念。但如今随着数字化的输入输出设备的发展，很多人也把数字图像的解析度用 DPI 来表示。严格来说，印刷时计算的网点和电脑显示器的显示像素并不相同，但现在已普遍认同，数字图像显示屏的信息，用 DPI 或 PPI 表示均可行，是相同的含义。

设备像素（device pixels）是指与硬件设备直接相关的像素，是真实的屏幕设备中的像素点。比如说，一个电脑显示器的参数中，最佳分辨率是 1920x1080，那么指的就是这个显示器在屏幕上用于显示的实际像素点，也就是设备像素。

另一个概念是 css 像素（css pixels）。css 像素是指网页布局和样式定义所使用的像素，也就是说，css 代码中的 px，对应的就是 css 像素。那么，css 像素和设备像素有什么区别呢？简单地说，css 像素比设备像素要更“虚拟”一些。下面来解释这一点。在桌面电脑上，浏览器有一个很少使用的功能：缩放。比如下边这个矩形元素，宽度是 128px，高度是 40px。显然，这里的尺寸是 css 像素。矩形元素的 css 像素尺寸没有变化，同样，你的显示器的设备像素尺寸也不会变化。但是，放大后，元素看起来变大了，在你的屏幕上占据了更大的空间。对应地，如果是缩小，则元素看起来变小了，在屏幕上占据的空间也变小了。

css 像素和设备像素之间是一种可变的转化关系。在 100%缩放比例下，1 个 css 像素等于 1 个设备像素。在表示某一数目的 css 像素时，在放大状态下使用了更多的设备像素，而在缩小状态下使用了更少的设备像素。这就是 css 像素和设备像素的概念。

对前端开发来说，设备像素没有意义，我只会关心 css 像素。只有 css 像素才描述了网页的布局与外观，我只需要让我的网页在 100%缩放比例下看起来不错就可以了。

viewport | 视口

正常情况下，viewport 和浏览器的显示窗口是一样大小的。但是，在移动设备上，两者可能不是一样大小。

if (typeof window.innerWidth != "undefined") {
  (viewportwidth = window.innerWidth), (viewportheight = window.innerHeight);
}

viewport 的作用即为：

width 控制 viewport 的宽度，可以是固定值，也可以是 device-width，即设备的宽度
height 高度
initial-scale 控制初始化缩放比例，1.0 表示不可以缩放
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable: 是否允许用户缩放

可见如果不定义 viewport 的话，页面宽度以屏幕分辨率为基准，而设置以后可以根据设备宽度来调整页面，达到适配终端大小的效果

比如，手机浏览器的窗口宽度可能是 640 像素，这时 viewport 宽度就是 640 像素，但是网页宽度有 950 像素，正常情况下，浏览器会提供横向滚动条，让用户查看窗口容纳不下的 310 个像素。另一种方法则是，将 viewport 设成 950 像素，也就是说，浏览器的显示宽度还是 640 像素，但是网页的显示区域达到 950 像素，整个网页缩小了，在浏览器中可以看清楚全貌。这样一来，手机浏览器就可以看到网页在桌面浏览器上的显示效果。

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

然后，手机浏览器的供应商是这么考虑的：由于手机屏幕的宽度对于 css 网页布局来说太小，为了让更多的网页能正常显示（一些流体布局的网页会在过窄的视口中变得一团乱），应该让视口更宽，超越屏幕的宽度。所以，在手机浏览器中，视口被划分为了两个：可见视口（visual viewport）和布局视口（layout viewport）。可见视口是指当前在手机屏幕上显示的部分。当你做缩放的时候，可见视口的尺寸（css 像素值）也会变化。

和可见视口不同，布局视口用于元素布局和尺寸计算（比如百分比的宽度值），而且比可见视口明显要更宽。无论你缩放，或者滑动页面，甚至翻转手机屏幕，布局视口始终不变。前文介绍过元素会取视口的宽度值，在手机上，这个限定和确定的是布局视口。这就是手机浏览器在处理时和桌面电脑浏览器不一样的地方，而这个布局视口的引入，保证了网页在手机里中的显示与在桌面电脑上的一致。布局视口的宽度是由手机浏览器定义的，随浏览器不同而不同。比如 Safari 是 980px，Android Webkit 是 800px。这都远比屏幕宽度值要大。

手机中的布局视口是可以更改的。你一定在很多移动版网页中见到过下边这个标签元素。

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

这是最早由 Safari 引入，但如今已普遍被各类手机浏览器认可了的一项设置。这其中有一句 width=device-width，它的意思是，把手机浏览器的布局视口的宽度，更改为当前设备的宽度。你还可以使用 width=500 这样的具体数值（也是 css 像素值）。总的来说，使用这个标签元素，就可以告诉手机浏览器当前页面应该使用的布局视口的尺寸。

做一下总结:

当视觉视口 = 布局视口,不会出现横向滚动条,而且 1css 像素 = 1 设备像素
当视觉视口 < 布局视口,会出现横向滚动条,而且 1css 像素 = 1 设备像素
当视觉视口 > 布局视口,不会出现横向滚动条,而且 1css 像素 > 1 设备像素

Viewport

Viewport 指的是网页的显示区域，也就是不借助滚动条的情况下，用户可以看到的部分网页大小，中文译为“视口”。视窗（Viewport）指的就是浏览器可视化的区域，而这个可视区域是 window.innerWidth/window.innerHeight 的大小。

vw：是 Viewport’s width 的简写,1vw 等于 window.innerWidth 的 1%
vh：和 vw 类似，是 Viewport’s height 的简写，1vh 等于 window.innerHeihgt 的 1%
vmin：vmin 的值是当前 vw 和 vh 中较小的值
vmax：vmax 的值是当前 vw 和 vh 中较大的值

vmin 和 vmax 是根据 Viewport 中长度偏大的那个维度值计算出来的，如果 window.innerHeight > window.innerWidth 则 vmin 取百分之一的 window.innerWidth，vmax 取百分之一的 window.innerHeight 计算。

Lengths Units | 尺寸单元

Relative Lengths Units | 相对尺寸单元

Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.

Unit	Description
em	Relative to the font-size of the element (2em means 2 times the size of the current font)Try it
ex	Relative to the x-height of the current font (rarely used)Try it
ch	Relative to width of the “0” (zero)
rem	Relative to font-size of the root element
vw	Relative to 1% of the width of the viewport*Try it
vh	Relative to 1% of the height of the viewport*Try it
vmin	Relative to 1% of viewport’s* smaller dimensionTry it
vmax	Relative to 1% of viewport’s* larger dimensionTry it
%

Absolute Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.

Unit	Description
cm	centimetersTry it
mm	millimetersTry it
in	inches (1in = 96px = 2.54cm)Try it
px	pixels (1px = 1/96th of 1in)Try it
pt	points (1pt = 1/72 of 1in)Try it
pc	picas (1pc = 12 pt)