CSS长度单位：px、ex、vh、vw、vmin、vmax、em、rem

2024/10/26 1:33:16 来源：https://blog.csdn.net/lianghecai52171314/article/details/142744962 浏览: 次关键词：CSS长度单位：px、ex、vh、vw、vmin、vmax、em、rem

px

相对长度单位。像素（Pixels）。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

ex

相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

vh、vw

v（viewpoint）也就是说vh、vw直接对应的是当前视口的尺寸。

width:100vh;
height:100vh;width:100%;
height:100%;

说明：

如果浏览器高度为1000px，宽度为800px，那么1vh=1000/100=10px，1vw=800/100=8px；
而 %要受到父元素的约束，并不能直接根据浏览器的尺寸计算。

vmin、vmax

vmin表示当前宽和高的小者，vmax则表示当前宽和高的大者。

em和rem

em

相对长度的单位，相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

rem

相对长度单位。
r（root）通常指标签，也就是只要用rem作为单位，都会以标签的设置为基础。
相对于根元素(即html元素)font-size计算值的倍数

<body><div>Test <!-- 14 * 1.2 = 16.8px --><div>Test <!-- 16.8 * 1.2 = 20.16px --><div>Test <!-- 20.16 * 1.2 = 24.192px --></div></div></div>
</body>
<style>
body {font-size: 14px;
}
div {font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
</style>