CSS3 中的度量单位

在 CSS3 中，有很多不同的度量单位可供使用。这些单位可以用于指定元素的尺寸、位置和其他属性。以下是一些常用的度量单位及其用法：

绝对长度单位

cm

cm 表示厘米单位，是一个绝对长度单位。

div {
  height: 6cm;
  width: 4cm;
}

mm

mm 表示毫米单位，也是一个绝对长度单位。

div {
  height: 60mm;
  width: 40mm;
}

in

in 表示英寸单位，同样也是一个绝对长度单位。

div {
  height: 2in;
  width: 3.5in;
}

pt

pt 表示点，一个点大约等于 1/72 英寸。

div {
  font-size: 14pt;
}

pc

pc 表示派卡，一个派卡等于 12 点。

div {
  font-size: 1.2pc;
}

相对长度单位

em

em 表示相对于当前元素的字体大小的单位。

div {
  font-size: 16px;
}

p {
  font-size: 1.5em; /* 24px */
}

rem

rem 表示相对于根元素（html 元素）的字体大小的单位。

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* 24px */
}

ex

ex 表示相对于当前字体下小写字母 x 的高度的单位。

div {
  font-size: 16px;
}

p {
  line-height: 2ex; /* 2x (lowercase x height) */
}

ch

ch 表示相对于当前字体下数字 0 的宽度的单位。

div {
  font-size: 16px;
}

p {
  width: 20ch; /* 20x (zero width) */
}

vw 和 vh

vw 和 vh 分别表示相对于视口宽度和视口高度的单位。

div {
  width: 50vw; /* 视口宽度的一半 */
  height: 50vh; /* 视口高度的一半 */
}

vmin 和 vmax

vmin 表示相对于视口宽度和视口高度中较小的那个的单位，而 vmax 则表示相对于较大的那个的单位。

div {
  width: 50vmin; /* 视口宽度和高度较小的一半 */
  height: 50vmax; /* 视口宽度和高度较大的一半 */
}

转换

px 到 rem

为了方便使用相对长度单位，可以用以下公式将 px 转换为 rem：

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* 24px */
}

结论

以上是常见的 CSS3 中的度量单位及其用法，可以根据项目需求自行选择合适的单位进行使用。