现今，在实现网页响应式设计时，CSS Reset 扮演着非常重要的角色。CSS Reset 是用来清除浏览器预设样式的一种技巧。而在实现响应式设计时，你需要根据不同设备大小和浏览器特性进行自适应的设置。因此，CSS Reset 也应该做到响应式性。下面将详细介绍如何实现响应式设计的 CSS Reset。
为什么需要 CSS Reset？
浏览器在加载网页的时候会默认添加一些样式。而不同的浏览器会在渲染网页时采用不同的样式，这就导致了网页在不同浏览器上显示出现一些不必要的差异。
而且在实现响应式设计时，网页需要在不同设备大小下进行自适应，有可能会遇到不同浏览器在不同设备下的预设样式不同的问题，因此必须要做 CSS Reset。
CSS Reset 的实现
对于一般的网页，我们可以使用默认的 CSS Reset。这个 Reset 包含了一些清除基本样式的 CSS，如：
-- -------------------- ---- ------- ----- ----- --- -- - ------- -- -------- -- - - - ----------- ----------- -
这样做可以清除网页的默认不必要的样式，并把 box-sizing 属性设置为 border-box，这能使网页在计算大小时不会因为边框和内补丁的影响而出现意想不到的问题。
但是这样的 Reset 并不是完全响应式的。当我们需要实现响应式设计时，就需要对 CSS Reset 进行完善。这里我们采用一个流行的 Reset 工具——normalize.css。
normalize.css
normalize.css 是一种流行的 CSS Reset 工具，它提供了处理 HTML5 元素的样式以及在不同浏览器、设备下的统一性。
首先我们需要从 normalize.css 的官网 下载 normalize.css，然后在网页 head 中引用该文件。这样我们就可以把 normalize.css 的样式应用到我们的网页中。
自定义样式
由于响应式设计需要在不同设备下进行自适应，所以我们需要为不同的显示设备编写不同的 CSS 样式。可以按照设备大小进行分类，如下所示：
-- -------------------- ---- ------- -- --------- --- -- -- ------ ------ --- ----------- ------ - -- -- -- - ------ ------ --- ----------- ------ --- ----------- ------ - -- -- -- - ------ ------ --- ----------- ------ --- ----------- ------- - -- -- -- - ------ ------ --- ----------- ------- - -- -- -- -
这里我们通过屏幕宽度进行分类，可以根据实际需求进行调整。
总结
CSS Reset 是实现网页响应式设计的重要一环。在实现 CSS Reset 时，我们需要先清除网页默认样式，然后使用 normalize.css 对网页样式进行规范化，最后按照不同设备大小进行不同的样式设置。
通过这种方式，我们可以轻松实现响应式设计，使网页在不同设备下都保持良好的可读性和可访问性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b7230968c7c53b0ac0b45