CSS Reset 是为了消除不同浏览器之间的差别，并让网站在不同的浏览器中展现出一致的效果。但有时候，CSS Reset反而会引起一些问题，比如字体大小不一致。
在使用 CSS Reset 的时候，我们需要将所有元素的字体大小设置为相同的大小。然而，这往往不是一个好主意。因为在网页中，不同的元素需要有不同的字体大小，以达到最佳的视觉效果。
以下是一些解决 CSS Reset 引起的字体大小不一致问题的技巧。
1. 使用 normalize.css
normalize.css 是一种比较流行的 CSS Reset 工具，它保留了一些默认样式，并消除了一些浏览器之间的差异。与其他类似工具不同的是，normalize.css 在这个过程中并没有将所有元素的字体大小设置为相同的大小。
使用 normalize.css 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- -------------------- -----------------
-------
------
------------
------------
--------------
-------
-------2. 使用 em 和 rem
在 CSS Reset 的基础上，我们可以使用 em 或 rem 单位来设置字体大小。这样我们可以在保持文字大小一致的同时，也可以让网页的不同元素有不同的字体大小。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------
----- ---- -
---------- -----
-
-- -
---------- -------
-
-- -
---------- -------
-
- -
---------- ------
-
--------
-------
------
------------
------------
--------------
-------
-------3. 使用 SASS 和 LESS
在 SASS 和 LESS 中，我们可以使用变量来设置字体大小。这样我们可以在不同元素之间更加灵活地切换字体大小而不必担心出现字体大小不一致的问题。
示例代码：
-- -------------------- ---- ------- ------------------- ------- ------------------- ------- --------------------- ------- -- - ---------- ------------------- - -- - ---------- ------------------- - - - ---------- --------------------- -
总结
在使用 CSS Reset 的时候，我们需要注意到不同元素之间的字体大小应该有所不同。通过使用 normalize.css、em 和 rem 单位以及 SASS 和 LESS 变量，我们可以解决 CSS Reset 引起的字体大小不一致问题，并让网站在不同浏览器中展现出一致的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496080c48841e98942fcfd1