15 个 CSS 相对单位，你知道多少个？em、rem、ex、cap、ch、ic……

如果你正在读这篇文章，我敢肯定你至少知道 5 种使用 CSS 居中 HTML 元素的方法。所以，15 种相对大小的选项应该不会让你感到惊讶。不过，有些选项确实挺奇怪的。

故事

我看到了 JavaScript Teacher 的这条推文，当时我只知道其中 5-7 个属性，这让我非常害怕错过（FOMO）。所以，我决定写这篇文章，希望能够帮助大家摆脱 FOMO 的困扰。

什么是相对单位？为什么我们需要它们？

您是否想过，您拥有的屏幕尺寸各不相同？但它们都能显示网页。因此，网页的样式需要根据显示屏（或任何其他 HTML 元素）的比例进行调整。

简而言之，优雅地实现这种响应式、自适应的布局。

动图

1. 不可预测的em

相对于当前元素的字体大小2em（即当前字体大小的两倍）。长度属性依赖于字体大小，是的，多么神奇。

.post {   
   font-size: 24px;
   border-left: 0.25em solid #4a90e2;
}

/* The border-left-width will compute to 6px. */

使用起来em可能会比较棘手，因为它的值是相对父元素获取的。如果是嵌套元素，当父元素em也有值时，情况会变得很混乱。

2.救世主雷姆（root em）

就像但相对于文档根元素em的字体大小。

 

p {
    margin-left: 1rem;
}

h4 {
    font-size: 2rem;
}

/* Unlike the em, which may be different for each element, the rem is constant throughout the document */

对于这种技术，设置基本字体大小是至关重要的，浏览器默认通常为 16px。

3,4. vh 和 vw 

与 不同em， 和rem取决于字体大小vh，而 和vw取决于视口的大小。

1vh=视口高度的1%或1/100
1vw =视口宽度的1%或1/100

您可能已经看到过一些网站的字体在您调整浏览器窗口大小时可以完美缩放，vw并vh实现这一点。

5,6. 最大速度 (vmax) 和 最小速度 (vmin)

视口最大值和视口最小值：1vw 或 1vh，分别取较大者或较小者。

1vmax= 1vw 或 1vh 中较大值的1%或1/100
1vmin = 1vw 或 1vh 中较小值的 1%或1/100

7. Good'ol %

相当受欢迎，每个人的朋友并且相当明显%与它的父元素相关。

.post {
  font-size: 24px;
}
.post-category {   
  font-size: 85%; 
} 
.post-title {   
  font-size: 135%; 
}
/*      
Child elements with % font sizes...      

  85%     
  0.85 * 24 = 20.4 px        
  135%     
  1.35 * 24 = 32.4 px
*/

现在让我们深入研究一些不太知名和相对不为人知的。

8,9. 实验 vi 和 vb

由于没有任何浏览器支持，这些是实验性的 API，不适用于生产。

1vb= 初始包含块大小的 1% ，沿根元素的块轴方向。 = 初始包含块
1vh大小的 1% ，沿根元素的行内轴方向。

由于它们相当新，所以不太流行或不受支持，您可以在 CSS 值和单位模块级别 4 中了解有关它们的更多信息。

10,11. 左手和右手

它们类似于em&，rem但它们取决于行高而不是字体大小。

lh= 等于使用它的元素的line-height属性的计算值。
rlh= 等于根元素上的line-height属性的计算值。

12. 例如

该**ex**单位很少使用。其目的是表示必须与字体 x 高度相关的大小。x高度大致等于小写字母（例如 a、c、m 或 o）的高度。

13. 帽子

它是所谓大写字母高度 (cap-height) 的度量单位。规范将大写字母高度定义为约等于**一个大写拉丁字母的高度 (height) 。

14. ch

表示字符 0 的**宽度，或者更准确地说，表示元素字体中字形“0”（零，Unicode 字符 U+0030）的提前测量值。

15. ‘ic’ 表意文字计数

ic是上述内容的东方对应词ch。它的大小与 CJK（中文/日文/韩文）表意文字*水*（“水”，U+6C34）的大小相同，因此可以粗略地理解为“表意文字数量”。

有些东西相当奇特和不常见，但我确信它们都有各自的用途和存在的理由。你最喜欢哪些呢？