您的位置:

CSS中所有度量单位

一、像素(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;
    }