CSS中所有度量单位

KEAM • 2024-10-03 23:43 • 编程

一、像素（px）

像素是CSS中最常见也是最基础的度量单位，在网页中占据着十分重要的地位。像素的大小不受系统、屏幕和浏览器的影响，其大小是固定的，因此可以保证在不同设备上的显示效果基本一致。为了控制元素的宽高、字体的大小等，我们通常会使用像素作为单位。

    /* 设置 font-size 为 16px */
    body {
        font-size: 16px;
    }
    
    /* 设置元素宽度为 200px，高度为 150px */
    .example {
        width: 200px;
        height: 150px;
    }

二、百分比（%）

百分比是一种非常灵活的度量单位，其值是以父元素的百分比为基础来计算的。比如，如果一个宽度为400px的父元素中包含一个宽度为50%的子元素，那么子元素的宽度将会是200px。

    /* 设置宽度为父元素的50% */
    .example {
        width: 50%;
    }

三、视口单位（vw，vh，vmin，vmax）

视口单位是相对于浏览器窗口的大小来计算的度量单位。vw（viewport width）表示1%的窗口宽度；vh（viewport height）表示1%的窗口高度；vmin表示窗口宽度或高度中的最小值；vmax表示窗口宽度或高度中的最大值。

视口单位常用于响应式布局中，可以根据不同的设备自适应调整元素大小。

    /* 在窗口宽度为1000px时，宽度为100px */
    .example {
        width: 10vw;
    }
    
    /* 在窗口高度为800px时，高度为100px */
    .example {
        height: 12.5vh;
    }
    
    /* 在窗口宽度和高度中的最小值为500px时，大小为100px */
    .example {
        font-size: 20vmin;
    }
    
    /* 在窗口宽度和高度中的最大值为800px时，大小为100px */
    .example {
        font-size: 12vmax;
    }

四、EM（以父元素字体大小为基础）

EM是一种相对于父元素设置大小的度量单位，其值是以父元素字体大小为基础来计算的。比如，如果一个字体大小为16px的元素中包含一个字体大小为0.5em的子元素，那么子元素的字体大小将会是8px。EM单位可以实现比较高效的自适应调整，尤其是在配合响应式布局使用时，可以让界面按照比例缩放，适应不同屏幕尺寸的设备。

    /* 以父元素字体大小为基础，设置字体大小为1.2em */
    .example {
        font-size: 1.2em;
    }
    
    /* 以父元素字体大小为基础，设置宽度为2em */
    .example {
        width: 2em;
    }

五、REM（以根元素字体大小为基础）

REM是一种相对于根元素（即html元素）设置大小的度量单位，其值是以根元素字体大小为基础来计算的。比如，如果html元素中字体大小为16px，那么1rem的大小就是16px。与EM相似，REM单位也可以实现高效的自适应调整。

    /* 以根元素字体大小为基础，设置字体大小为1.2rem */
    .example {
        font-size: 1.2rem;
    }
    
    /* 以根元素字体大小为基础，设置宽度为20rem */
    .example {
        width: 20rem;
    }

原创文章，作者：KEAM，如若转载，请注明出处：https://www.506064.com/n/131170.html