知方号

知方号

CSS 单位指南:CSS em、rem、vh、vw 等详解

原文: CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained

许多 CSS 属性如 width、margin、padding 和 font-size 都需要一个长度,而 CSS 有许多不同的方法来表达长度。

在 CSS 中,长度是一个数字,一个没有空格的单位。例如,5px、0.9em,等等。

在 CSS 中,一般有两种用于长度和尺寸的单位:绝对单位和相对单位。

绝对长度单位

绝对长度单位是基于一个实际的物理单位,通常被认为是跨设备的相同尺寸。但是,根据你的屏幕尺寸和质量,或者你的浏览器或操作系统的设置,可能会有一些例外。

下面是 CSS 中一些常见的绝对长度单位:

px

像素,或 px,是 CSS 中最常见的长度单位之一。

在 CSS 中,1 像素被正式定义为 1/96 英寸。所有其他的绝对长度单位都是基于这个像素的定义。

但是,在最初制定这一标准时,大多数显示器的分辨率为 1024×768,DPI(每英寸点数)为 96。

现代设备的屏幕具有更高的分辨率和 DPI,所以 96 像素长的线可能无法精确测量到 1 英寸,这取决于设备的情况。

尽管以像素为单位的尺寸在不同的设备上会有所不同,但一般认为在屏幕上使用像素更好。

如果你知道你的页面将在高质量的打印机上打印,那么你可以考虑使用另一个单位,比如 cm 或 mm。

你可以在这篇文章中了解

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。