相对单位

背景

作为一名前端开发人员，离不开的就是适配各种各样的设备，保证页面在不同的设备上渲染出相同的效果。这在以前来说，比较困难，各家浏览器厂商对规范有各自的解释权，我们还要处理所谓的浏览器兼容性。现在都 5202 年了，浏览器之间的差异没那么显著了，可以说是忽略不计。页面在用户的屏幕上呈现出什么效果，这不是我们能够控制的（我相信你使用过学校机房的电脑吧，你觉得那个显示效果怎么样？）。色彩啊那些东西，没办法，吃配置。我们能做的，就是把控页面的整体布局，做到在不同尺寸 / 不同分辨率的设备上有着相同的布局效果，这就是所谓的响应式布局。

概念

有相对单位，就有“绝对”单位，那就是 px，这是浏览器渲染的基本单位，也就意味着相对单位会经过计算转换成px，所有用 px 的地方都可以用相对单位替换

em 和 rem

em

相对于元素的字体大小而言的，默认 1em = 16px

坑：由于 font-size 也可以设置 em ，相对于父级元素的字体大小，在嵌套列表的时候，设计不好很容易造成文字的逐级缩小或逐级扩大

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size: 12px;
        }
        ul {
            font-size: 2em;
            list-style: none;
            padding: 1em;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <ul>
                <li>
                    嘿嘿嘿
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

rem

全称是 root em，其实就是相对于根节点（html）的字体大小，这样，我们固定了根节点的字体大小，rem 的值也就是固定的。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root{
            font-size: 12px;
        }
        ul {
            font-size: 2rem;
            list-style: none;
            padding: 1em;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <ul>
                <li>
                    嘿嘿嘿
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

经验法则

拿不准的时候，用rem设置字号，用px设置边框，用em设置其他大部分属性

vw 和 vh

这两兄弟是相对于浏览器视口而言的，所谓的这个视口，就是网页的渲染区域。

vw 代表视口宽度的 1%，vh代表视口高度的 1%。

vmin 和 vmax

同样是相对于浏览器视口而言的，vmin = Math.min(视口宽,视口高)，vmax = Math.max(视口宽，视口高)。

关于继承的怪异特性

子元素继承的是父元素经过计算后计算值，而不是在源文件中的属性值。

对于 line-height 属性来说，最好是配置无单位的参数值，否则会发生一些奇怪的现象，比如多行文本重叠。

CSS 变量

网页开发中，很多时候许多属性的值都是相同的，通常对于这种“常量值”我们都会单独的抽离出来进行复用。以后需要更改值的时候，只需要改一处代码，就可以作用于页面的多个地方。

定义方式：--[变量名]:[值]

使用方式：var(--[变量名]) => 向上寻找就近的变量

Date：2025/05/25

Author：kaiven

相对单位 ​

背景 ​

概念 ​

em 和 rem ​

em ​

rem ​

经验法则 ​

vw 和 vh ​

vmin 和 vmax ​

关于继承的怪异特性 ​

CSS 变量 ​