CSS Reset 与根元素字号大小问题-JavaScript中文网-JavaScript教程资源分享门户

前言

在执笔本篇文章之前，先让我们来了解一下 CSS Reset 的概念。CSS Reset 是一种标准化的 CSS 样式表，主要目的是将不同浏览器之间元素的显示效果尽可能的统一化，以达到较好的 UI 体验效果。同时，CSS Reset 还能够解决在不同系统、终端、设备等环境下，由于 CSS 样式不兼容而出现的不同显示效果的问题。

不过，CSS Reset 的使用也会导致一些新的问题，在这篇文章中，我们将会探讨 CSS Reset 与根元素字号大小的问题，同时分析其产生的原因，并提出相应的解决方案。

CSS Reset 的使用

CSS Reset 最早由 Eric Meyer 提出，要达到标准化的样式表，CSS Reset 可以在整个网站中使用。事实上，现在很多的框架都默认集成了 CSS Reset ，如 popular 的 bootstrap 就内置了 Normalize.css，它是一个基本的 CSS Reset 库，可以让不同的浏览器在元素的渲染上达到一致效果。使用 Normalize.css 后，我们可以在不同的浏览器下，尽可能保持一致的 UI 体验效果。

例如 Normalize.css 的一些基本样式：

// javascriptcn.com 代码示例
/**
 * 1. 许多浏览器中将margin设置为0是很有用的。我们重置了此属性，
 *    以便更好地控制元素之间的空白。
 **/
 
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
}

html {
    font-size: 16px;
}

/**
 * 2. "Inherit" 通常是一种非常好的方法，让样式完全基于父元素，
 *    但在某些情况下，它会导致不公平的继承情况。
 *
 *    例如，让`button`元素的字体大小继承默认的font-size，
 *    但`button`元素在IE中得到了一个错误的值，所以我们纠正了这个问题。
 */
button {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

[hidden] {
    display: none;
}

根元素字号大小的问题

一般来说，CSS Reset 会默认将根元素的字号大小设置为 16px，主要是为了达到在不同浏览器、不同设备上达到一致的显示效果。但是，在某些情况下，会因为对根元素字号大小的设置问题而导致浏览器无法正常渲染网页，使网页无法正常使用。

对根元素字号大小的设置主要是为了响应式布局的需要，在不同的设备上使用相应的根元素字号比例来适应不同的分辨率。如果我们不对根元素字号大小进行设置，那么在不同的设备上，网页的显示效果会有相应的变化，这显然会影响 UI 体验，增加前端开发的难度。

换句话说，对根元素字号大小的设置是有必要的，但我们要解决的是如何正确地设置根元素字号大小。

根元素字号大小的正确设置方法

为解决根元素字号的大小问题，我们可以通过设置根元素的 font-size 值，来达到在不同设备上的统一显示效果的目的。例如，在 iPhone 上我们可以设置 font-size: 14px，在 MacBook 上我们可以设置 font-size: 16px，在 iPad 上我们可以设置 font-size: 18px 等等。

实际上，Google 就提供了一个适用于根元素字号大小设置的算法，它的设置方式与使用 Normalize.css 相类似：

html {
    font-size: calc(16px + (24 - 16) * ((100vw - 375px) / (1920 -375)));
}

其中，16px 是基础字体大小，24px 是最大字体大小，375px 和 1920px 分别是针对 viewport 的最小值和最大值。

总结

通过本篇文章的阐述，我们了解了 CSS Reset 的概念，以及它常见的用途和问题。同时，我们还分析了根元素字号大小的问题，指出了正确的解决方法，给出了相应的样例代码。在使用 CSS Reset 的同时，我们也要注意根元素字号大小的设置，以达到更好的 UI 体验效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654b7f1f7d4982a6eb54bd74