屏幕尺寸

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)