Μονάδες CSS

Μονάδες CSS

CSS 有几种表示长度的不同单位。

许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等。

长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。

实例

使用 px（像素）设置不同的长度值：

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

亲自试一试

数字和单位之间不能出现空格。但是，如果值为 0，则可以省略单位。

对于某些 CSS 属性，允许使用负的长度。

长度单位有两种类型：绝对单位和相对单位。

绝对长度

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。

单位 描述 TIY
cm 厘米 Προσπαθήστε το!
mm 毫米 Προσπαθήστε το!
in 英寸 (1in = 96px = 2.54cm) Προσπαθήστε το!
px * 像素 (1px = 1/96th of 1in) Προσπαθήστε το!
pt 点 (1pt = 1/72 of 1in) Προσπαθήστε το!
pc 派卡 (1pc = 12 pt) Προσπαθήστε το!

* 像素（px）是相对于观看设备的。对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。

相对长度

相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。

单位 描述 TIY
em 相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍） Προσπαθήστε το!
ex 相对于当前字体的 x-height(极少使用) Προσπαθήστε το!
ch 相对于 "0"（零）的宽度 Προσπαθήστε το!
rem 相对于根元素的字体大小（font-size） Προσπαθήστε το!
vw 相对于视口*宽度的 1% Προσπαθήστε το!
vh 相对于视口*高度的 1% Προσπαθήστε το!
vmin 相对于视口*较小尺寸的 1％ Προσπαθήστε το!
vmax Σχετικά με το μεγαλύτερο μέγεθος του πίνακα προσόψεων * 1% Προσπαθήστε το!
% Σχετικά με τον γονικό στοιχείο Προσπαθήστε το!

Σημείωση:Οι μονάδες em και rem μπορούν να χρησιμοποιηθούν για τη δημιουργία τέλειων εύκαμπτων σχεδίων!

* Πίνακας Προσόψεων (Viewport) = Μέγεθος του παραθύρου του browser. Αν το πίνακας προσόψεων είναι 50 εκατοστά, τότε 1vw = 0.5 εκατοστά.

Υποστήριξη Browser

Οι αριθμοί στη τράπεζα δεδομένων δείχνουν την πρώτη έκδοση του browser που υποστηρίζει πλήρως αυτή τη μονάδα μέτρησης.

Μονάδες Μέτρησης Χωρητικότητας
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0