💖简介
在CSS
中,长度单位分为绝对长度单位和相对长度单位。这些单位用于定义元素的尺寸、边距、填充、字体大小等属性值
vmin
和vmax
是CSS
中的相对长度单位,它们基于视口(viewport
)尺寸来定义元素的宽度或高度。这些单位使得元素的尺寸可以根据视口的大小进行缩放,从而有助于创建响应式设计。特别是当涉及到屏幕方向的变化时,如从竖屏切换到横屏。
⭐绝对长度单位
绝对长度单位指的是那些无论环境如何变化,其值都是固定不变的单位。它们通常适用于需要精确控制尺寸的情况,例如打印样式表中的页面布局
cm
(厘米):1cm = 96px / 2.54 ≈ 37.8px
。mm
(毫米):1mm = 1/10th of 1cm = 3.78px
。Q
(四分之一毫米):1Q = 1/40th of 1cm = 0.945px
。in
(英寸):1in = 2.54cm = 96px
。pc
(派卡):1pc = 1/6th of 1in = 16px
。pt
(磅):1pt = 1/72th of 1in = 1.33px
(对于Windows系统) 或 1px (对于Apple系统)。px
(像素):1px = 1/96th of 1in
,是Web开发中最常用的单位,代表屏幕上的一个点 1。
⭐相对长度单位
相对长度单位则取决于其他因素,如父元素的尺寸、根元素的字体大小或视窗尺寸。这类单位非常适合响应式设计,因为它们可以根据不同的设备和屏幕尺寸自动调整
em
:相对于当前对象内本的字体大小,如果当前对象内的字体大小未被设置,则相对于浏览器的默认字体大小。起初排版度量时是基于当前字体写字母M
的宽度的,但现在的定义为相对于当前元素的字体大小。rem
:相对于根元素 (<html>
) 的字体大小,避免了嵌套累积的问题,使得整个页面的比例缩放更加容易管理 。ex
:相对于字符"x"
的高度,这个高度通常为字体大小的一半左右。ch
:基于字符"0"
的宽度,主要用于等宽字体中。vw
和vh
:分别表示视口宽度和高度的百分比,1vw
等于视口宽度的1%
,1vh
等于视口高度的1%
。vmin
和vmax
:分别是vw
和vh
中较小的一个和较大的一个,有助于确保元素尺寸适应不同方向的屏幕比例变化。%
:百分比单位,以百分数形式表示长度值,通常是相对于包含块的相应尺寸。
此外,还有一些较少见但同样重要的相对单位,比如cap
(大写字母的高度)、ic
(全角汉字的平均宽度)、lh
和 rlh
(行高),以及 vi
和 vb
(视口内联轴和块轴上的尺寸)。
结束