在前端开发中，我们常常会使用 CSS Reset 来重置页面样式。但是有时候会出现一个问题，就是 CSS Reset 后页面的字体大小会变小，这该如何处理呢？
问题分析
首先，我们需要了解一下为什么 CSS Reset 会导致页面字体变小。CSS Reset 的作用是将浏览器默认的样式全部清除，以达到统一样式的目的。其中，浏览器默认样式中包含了很多关于字体大小的设定。当我们使用 CSS Reset 后，这些默认设定就被清除了，因此字体大小也变小了。
解决方案
1. 设置全局字体大小
一种解决方案是通过设置全局字体大小来解决这个问题。我们可以在 CSS Reset 后设置一个全局的字体大小，这样就可以保证页面的字体大小不会变小了。
-- --- ----- -- - - ------- -- -------- -- ----------- ----------- - -- -------- -- ---- - ---------- ----- -
在上面的代码中，我们设置了一个全局的字体大小为 16px，这样即使在 CSS Reset 后，页面的字体大小也不会变小了。
2. 使用 rem 单位
另一种解决方案是使用 rem 单位来设置字体大小。rem 单位是相对于根元素（即 html 元素）的字体大小来计算的。因此，当我们在 CSS Reset 后设置根元素的字体大小时，就可以使用 rem 单位来设置其他元素的字体大小了。
-- --- ----- -- - - ------- -- -------- -- ----------- ----------- - -- --------- -- ---- - ---------- ----- - -- -- --- -------- -- ---- - ---------- ----- -
在上面的代码中，我们设置了根元素的字体大小为 16px，然后在 body 元素中使用 1rem 来设置字体大小。这样即使在 CSS Reset 后，页面的字体大小也不会变小了。
总结
在前端开发中，使用 CSS Reset 可以帮助我们达到统一样式的目的。但是，CSS Reset 也会导致页面的字体大小变小。为了解决这个问题，我们可以通过设置全局字体大小或者使用 rem 单位来达到目的。这样可以保证页面的字体大小不会变小，同时也可以让我们更好地控制页面的样式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66885babdc1ed1a61ba6704e