理解各种CSS单位（px, em, rem, vw, vh, vmin, vmax）

前端

发布日期: 2019-01-01

更新日期: 2020-07-17

文章字数: 789

阅读时长: 3 分

阅读次数:

px

px是绝对单位，页面按照精确的像素展示。1px表示1像素。

em

em是相对单位，相对于父节点或者自身的字体大小。比如父节点定义了字体大小为font-size:10px，那么子节点如果定义1em就等于10px，1.2em等于12px。

如果所有父节点都没有定义字体大小，会相对于根节点计算相对大小。

因此使用em单位可以很方便调整页面的显示。我们只需要修改父节点或者根节点的字体大小，就可以控制页面的显示效果。

注意，em不仅仅可以作为字体大小单位，也可以其他任何属性的单位，例如width, height, border等等。

示例：

<html style="font-size:14px">
    <head>
        <title>Test HTML</title>
    </head>
    <body>
        <div style="width: 10em; height: 10em; border:0.2em solid gray;">
            <div style="font-size: 12px">
                <span style="font-size: 1.3em">This is the test text</span>
            </div>
        </div>
    </body>
</html>

第一个div的宽度，高度以及边框大小会相对于根节点<html>的字体大小，即14px。而第二个div下的span的字体大小1.3em会相对于第二个div的字体大小，也就是12px。

rem

rem可以理解为特殊的em，因为它始终相对于根节点的字体大小。

示例：

<html style="font-size:14px">
    <head>
        <title>Test HTML</title>
    </head>
    <body>
        <div style="width: 10rem; height: 10rem; border:0.2rem solid gray;">
            <div style="font-size: 12px">
                <span style="font-size: 1.3rem">This is the test text</span>
            </div>
        </div>
    </body>
</html>

同样，第一个div的宽度，高度以及边框大小会相对于根节点<html>的字体大小，即14px。不同的是span的字体大小1.3rem同样会相对于根节点字体大小，即使父节点定义了不同的字体大小，也不会对其起任何作用。

vw，vh，vmin，vmax

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%，100vw等于视窗宽度。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%，100vh等于视窗高度。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

这个单位可以使你的应用容易的适配各种大小的浏览器窗口。因为它会随着浏览器窗口大小而动态变化。

示例：

<html style="font-size:14px;">
    <head>
        <title>Test HTML</title>
    </head>
    <body style="margin:0px;padding:0px">
        <div style="width: calc(100vm - 2px); height:calc(100vh - 2px);border:1px solid gray">
            <div style="font-size: 12px">
                <span style="font-size: 1.3rem">This is the test text</span>
            </div>
        </div>
    </body>
</html>