CSS3显示尺寸

2023-10-21 13:20:16

Px，Pt，em，Rem，vw，vh等尺寸单位

author: Once Day date: 2022年2月1日

1.绝对长度

绝对长度是物理量，代表实际的长度，不随分辨率的高低而变动。

1.1 真实物理长度

cm 厘米
mm 毫米
in 英寸 (1 in=2.54 cm)
pt 磅(1 pt=1/72 in)
pc 派卡(1 pc =12 pt)

1.2 虚拟长度单位

该单位为数字化图像长度，其与真实单位的切换需要精度DPI(Dots Per Inch，每英寸像素数)，在Windows系统默认是96dpi，Apple系统默认是72dpi。

pt和px的换算公式可以根据pt的定义得出:

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

因此，当Dpi确定后，也就可以计算Px的真实长度，如下面以Dpi=96dpi为例：

字号	Pt	Px
初号	42Pt	56Px
小初	36Pt	48Px
一号	26Pt	35Px
小一	24Pt	32Px
二号	22Pt	29Px
小二	18Pt	24Px
三号	16Pt	22Px
小三	15Pt	21Px
四号	14Pt	19Px
小四	12Pt	16Px
五号	10.5Pt	14Px
小五	9Pt	12Px
六号	7.5Pt	10Px

2.相对长度

2.1 ex和ch

ex 是依赖于字母小x的高度。在含有 ‘ x ’字母的字体中，它是该小写字母的高度，对于很多字体而言，1ex ≈ 0.5em，即占字体高度的一半。

ch 这一单位代表元素所用字体中 ‘ 0 ’ 这一字形的宽度。

2.2 em、rem和%

em 基准点为父节点字体大小（继承父元素的字体大小），如果自身定义了 font-size，则按自身来计算（浏览器默认字号是 16px）。但整个页面内 1em不是一个固定的值，如果父元素设置了字体大小，那么em就是相对于父元素的字体大小，如果没有设置，那么就是相对于 html 根元素的字体大小。默认情况下1 em=16 Px。

rem 可理解为‘root em’，相对根节点 html（网页）的字体大小来计算。它不会像 em 那样，依赖于父元素的字体大小，从而造成混乱。如果没有设置，那么 rem 始终等于浏览器默认大小 16px 。rem 的一个特点就是用户可以通过调整浏览器的字号，进而改变页面的文本字体大小。

% 相对父元素的大小。对不同的情况下父元素的选取也有不同：

对于普通定位元素，其父元素即正常继承产生的父节点。
对于绝对定位(position：absolute;)的元素，其父元素是其相对已定位的父元素。
对于固定定位(position：fixed;)的元素，其父元素是 ViewPort（可视窗口）。

2.3 vw，vh，vmin和vmax

vwviewpoint width 视窗宽度，1vw=视窗宽度的1%。例如，浏览器宽度1200px，1vw = 12px。
viewpoint height 视窗高度，1vh=视窗高度的1%。例如，浏览器高度900px，1vh = 9px。
vmin vw和vh中较小的那个。
vmax vw和vh中较大的那个。

3.css像素和设备像素

CSS 像素(CSS Pixel) :又称为虚拟像素、设备独立像素或逻辑像素，也可以理解为直觉像素。CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的逻辑像素。比如 iPhone 6 的 CSS 像素数为 375 x 667px。

设备像素(Device Pixels) :又称为物理像素。指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了。比如 iPhone 6 的分辨率为 750 x 1334px

设备像素比(DevicePixelRatio) :DPR = 设备像素 / CSS 像素

这里的 CSS 像素其实是理想视口，例如，iPhone 6 物理像素为 750 x 1334，理想视口 375 x 667 ，DPR = 2。在Retian屏上，DPR不再是1，而是大于1，比如2（iPhone 5 6 7 8）或3（iPhone 6 Plus等一系列Plus）或者为非整数（一些Android机），说不定还会涨。

例如，iPhone 6的物理像素上面已经说了，是750 * 1334，而它的逻辑像素是 375 * 667。我们只需在iPhone 6的Safari里打印一下screen.width和screen.height就知道了，据此很容易计算出DRP为2。