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