前言
在编写网页时，我们通常都会使用 CSS 来控制页面的样式和排版。不过，不同的浏览器对 CSS 样式的解析不尽相同，导致同一份 CSS 代码在不同的浏览器中显示效果也不同。这是因为浏览器在默认情况下有自己的 CSS 样式表，称为浏览器默认样式表（Browser Default Stylesheets），这些样式表的目的是为了让不同的元素在不同的浏览器中的默认样式更统一。
为了规避浏览器默认样式所带来的影响，CSS Reset 是常见的一种技术手段。CSS Reset 的核心思想是将页面中所有元素的默认样式都统一成一个最基础的样式，然后再根据自己的需求逐步调整。在本文中，我们将介绍如何使用 CSS Reset 实现根据页面大小自适应的字体大小。
根据页面大小自适应字体大小
在移动设备时代，我们需要做一个自适应的网页。让人们可以在 PC、平板和手机上都能流畅的访问我们的网页。其中，一个很重要的部分就是字体大小的自适应。如果字体大小不自适应就会出现：在手机上过小，在 PC 上过大等情况。如果你能够又好又快速的解决这个问题，你就会成为用户眼中的一颗明珠。
在 CSS 中，我们可以使用 vw 和 vh 单位来实现字体大小的自适应。在本文中，我们将使用 CSS Reset 和这两个单位，来实现根据页面大小自适应的字体大小。
下面是一个示例代码：
---- -
---------- -----
-
------ ------ --- ----------- ------ -
---- -
---------- ----
-
-
------ ------ --- ----------- ------ --- ----------- ------ -
---- -
---------- ----
-
-
------ ------ --- ----------- ------ -
---- -
---------- ----
-
-上面的代码中，我们将 html 的默认字体大小设置为 16px，然后依据不同的屏幕大小为 html 元素的字体大小设置了三个不同的值：在 0768px 的范围内，字体大小设置为屏幕宽度的 5%；在 769992px 的范围内，字体大小设置为屏幕宽度的 3%；在 993px 以上的范围内，字体大小设置为屏幕宽度的 2%。
总结
CSS Reset 在 Web 开发中是非常重要的一步，通过统一所有元素的默认样式，可以让我们更好地控制页面的样式和排版。在本文中，我们介绍了如何使用 CSS Reset 和 vw/vh 单位实现根据页面大小自适应的字体大小。相信在实际的项目中，这个技巧会给你带来很大的帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f831e1f6b2d6eab30537d0