现代 CSS Reset：实现响应式设计的新思路-JavaScript中文网-JavaScript教程资源分享门户

CSS Reset 是前端开发中常用的技术，它能够帮助开发者快速地清除浏览器默认样式，并能够帮助开发者更好地实现样式设计。但是，随着现代 Web 设计的发展，CSS Reset 也从传统的盒模型、浏览器兼容性的层面升级，并被赋予了更多的新方法和新思路，其中包括实现响应式设计的新思路。本文将介绍这种新思路，并提供具体的指导、示例和学习意义。

传统 CSS Reset 的问题

传统 CSS Reset 通常是通过一些全局选择器清除所有浏览器默认样式，比如以下代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

这个 Reset 可以帮助开发者移除大部分浏览器默认样式，但它同时也会移除一些有用的样式属性。比如，如果我们在页面中使用了 fieldset 标签，那么它的默认样式将会被这个 Reset 移除，这也就影响了这个标签的表现。而且，一些开发者可能会选择覆盖一些默认样式，如 link 的默认样式，然而这种全局的操作可能导致其他一些元素出现问题。

现代 CSS Reset 的解决办法

现代 CSS Reset 的解决办法则是使用针对性更强且更细的 Reset。通过使用更具体的选择器，我们能够精确地控制针对每一个元素所需要移除的默认样式，并解决传统 CSS Reset 存在的问题。在传统 Reset 中，我们会看到使用了 * 通配符，然而在现代 Reset 中，我们可以使用更具体的选择器。下面是一个例子：

html {
  box-sizing: border-box;
  font-size: 10px;
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

:focus {
  outline: none;
}

::-moz-focus-inner {
  border: 0;
}

在这个 Reset 中，我们可以看到，我们使用了更具体的 selectors，如 html、 body、 h1、 h2、 h3 等，而且我们也只清除了某些浏览器默认样式，如 margin、 padding、 font-size、 font-weight 等，而我们保留了一些其他元素的默认样式。这种 Reset 的好处在于，它保留了很多默认属性，能够让开发者更好地控制自己的样式，避免了对其他元素样式产生意外的影响。

现代 Reset 与响应式设计

响应式设计已经成为了现代 Web 设计的重要方面。它能够让页面适应不同的设备尺寸，为用户提供更好的体验。而现代 Reset 正好可以帮助我们实现响应式设计。

通过考虑响应式设计的需求，我们可以使用不同的 Reset 来解决问题。例如，在一个移动设备上，我们希望保留默认的字号，并允许用户缩放页面，因此，我们可以使用下面这个 Reset：

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

如此一来，移动端的页面就可以自动缩放，而在桌面尺寸的设备上，我们可以使用下面的 Reset：

html {
  font-size: 16px;
}

在桌面端，我们希望字号是固定的，因此我们通过指定具体的值来覆盖默认的字号。

在实际开发中，我们也可以根据设计的需求，设置不同的字号和布局。例如，对于一个响应式页面主题，我们可以使用下面的 Reset：

@media only screen and (max-width: 960px) {
  html {
    font-size: 100%;
  }
}

@media only screen and (min-width: 961px) {
  html {
    font-size: 16px;
  }
}

这个 Reset 中，我们定义了两个媒体查询，当窗口的宽度小于 960px 时，我们使用百分比作为字号，从而实现移动端的响应式；当窗口的宽度大于等于 961px 时，我们使用具体的值作为字号，从而实现桌面端的响应式。

总结

现代 CSS Reset 解决了传统 Reset 的问题，它能够保留某些元素的默认样式，针对性更强且更细，能够解决开发者在使用 Reset 时可能会出现的问题。并且，现代 Reset 与响应式设计紧密结合，能够使页面在不同的设备上表现更加优秀。在实际开发中，我们也应该使用现代 Reset，更好地控制各个元素的样式，并以响应式设计为目标，提供更好的页面体验。

参考文献

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