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

梁云亮2024-10-12 11:53

px

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

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

ex

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

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

vh、vw

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

css 复制代码

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计算值的倍数

html 复制代码

<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>

也就是说这样设置的话，每层都要看它的父元素，而这并不总是我们想要的，rem可以来补充em不足。

q

1/4毫米（quarter-millimeters）。绝对长度单位。

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

in

英寸（Inches）。绝对长度单位。

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

pt

点（Points）。绝对长度单位。

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

pc

派卡（Picas）。绝对长度单位。相当于我国新四号铅字的尺寸。

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

cm/mm

厘米/毫米