【CSS】尺寸单位
发布时间
阅读量：
阅读量
在 CSS 中，常见的尺寸单位有以下几种：
像素（px）：
这是最常用的绝对单位。例如宽度设置为 width: 200px 能表示宽度为 200 像素。像素的尺寸固定不变。
备注：
px 在不同设备上的物理尺寸是不固定的。
对于电脑显示器来说，在大多数情况下(px)与屏幕的实际像素相对应。
然而，在移动设备上情况则更为复杂。
具体来说，在标准分辨率下（如常见的96 DPI设置），1 px大致相当于1/96英寸。
同样数值下的px在高密度屏中所代表的实际距离会有所变化：例如，在高密度设置下约为0.5/96英寸。
而超高清屏则可能进一步缩减这一数值。
另外值得注意的是，
DPI 则表示每英寸有多少个像素点，
这一参数直接影响了图像的整体清晰度和细节表现能力，
其值越高，
图像呈现的效果也就越细腻逼真。
百分比（%）：
相对单位基于于父元素的尺寸。例如，在父容器宽度设定为500px时，默认情况下若子容器设置为width: 50%（即占父容器宽度的半数），则其宽度将自动计算为250px。
em：
基于父元素的字体尺寸。例如，在设定父元素字体大小为16px时，在子元素中使用font-size: 2em会导致其字体尺寸变为32px。
rem：
基于根元素（多为 <html> 元素）的字体大小。这有助于在整体页面中实现尺寸的一致性和可管理性。
vw 和 vh：
该方法采用...（Viewport Width）和...（Viewport Height）这两个参数来定义布局区域。其中...1vw相当于整个视口宽度的 1%，而...1vh相当于整个视口高度的 1%。
例如，如果视口宽度为 1000px，设置 width: 50vw; ，则元素宽度为 500px。
补充点：
在 CSS 中，font-size: 50% 表示字体大小为父元素字体大小的 50%。
全部评论 (0)
还没有任何评论哟~