如何减少DOM的所有元素的字体大小？

Question

是否可以通过特定值减少DOM的所有元素的大小？

我现在正在使用bootstrap风格。 与h5一样，它是14px，我需要12px，对于h1，它是36px，我需要34px等。

我有2个选项可以做到这一点

1. 为所有元素重写自定义css。它需要一个巨大的变化。
2. 使用jQuery。我需要遍历DOM的所有元素。找出那里 font-size并将其减少2px。它会减慢页面加载时间。

有没有更好的方法呢？

Answer 1

您可以做的是，您可以在 rems 中为body设置基本字体大小。

意思是，您必须为您的身体设置font-size属性，如下所示：

body {
    font-size: 10px;
}

在此之后，rem单位将等于您的基本字体大小：

1rem = 10px

因此，您需要将所有元素的font-size设置为rem。

当您想要缩小或缩小所有内容时，只需更改body font-size属性，它就会相应地扩展所有其他属性。

  

因此，单位变得相对。*

如果您想了解JS方式，可以使用 FitText 等插件或其他替代方案。