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 中，我们可以使用更具体的选择器。下面是一个例子：
-- -------------------- ---- ------- ---- - ----------- ----------- ---------- ----- ------------------------- ----- - -- --------- ------- - ----------- -------- - ---- - ------- -- -------- -- - --- --- -- - ------- -- -------- -- ---------- -------- ------------ -------- - ------ - -------- ----- - ------------------ - ------- -- -
在这个 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：
-- -------------------- ---- -------
------ ---- ------ --- ----------- ------ -
---- -
---------- -----
-
-
------ ---- ------ --- ----------- ------ -
---- -
---------- -----
-
-这个 Reset 中，我们定义了两个媒体查询，当窗口的宽度小于 960px 时，我们使用百分比作为字号，从而实现移动端的响应式；当窗口的宽度大于等于 961px 时，我们使用具体的值作为字号，从而实现桌面端的响应式。
总结
现代 CSS Reset 解决了传统 Reset 的问题，它能够保留某些元素的默认样式，针对性更强且更细，能够解决开发者在使用 Reset 时可能会出现的问题。并且，现代 Reset 与响应式设计紧密结合，能够使页面在不同的设备上表现更加优秀。在实际开发中，我们也应该使用现代 Reset，更好地控制各个元素的样式，并以响应式设计为目标，提供更好的页面体验。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65927427eb4cecbf2d73ef56