随着网页设计的不断发展，越来越多的人开始关注响应式 Web 设计。但是，在实践中，我们可能会遇到如下问题：当我们使用一些通用的 CSS 样式表库时，这些库中的默认样式可能会与我们的需求相矛盾，导致我们需要进行大量的样式重定义。CSS Reset 可以解决这一问题。同时，CSS Reset 也会影响到响应式 Web 设计。因此，本文旨在探讨如何让 CSS Reset 与响应式 Web 设计相结合。
CSS Reset 和样式重定义
所谓 CSS Reset，即在网页初加载时，通过一些通用样式来重置浏览器的默认样式，以确保不同浏览器的展示效果一致。CSS Reset 的核心思想是去掉所有默认样式，从而让所有 HTML 元素的样式从同一出发点开始。
CSS Reset 的优劣：
CSS Reset 的优势在于可以极大地提高样式构建的效率。由于 CSS Reset 已经重定义了浏览器的默认样式，因此开发者可以通过修改少量的样式来完成页面构建。但 CSS Reset 的劣势也显而易见，即在对于某些元素的精细控制上需要耗费更多的功夫，更可能出现样式冲突和样式覆盖等问题。
在实际样式构建中， CSS Reset 与样式重定义非常相似。样式重定义是对 CSS Reset 中重定义样式的二次修改，以满足实际需求。样式重定义的核心是慎重，决不能因为方便而随意删除或添加样式。正因为此，下文将讨论一些重写规则以及应注意的事项。
CSS Reset 和响应式 Web 设计
响应式 Web 设计是通过 CSS3 中的 Media Query 实现，它可以根据不同的屏幕尺寸动态调整页面的布局和样式。而 CSS Reset 对于这种动态调整布局的设计会产生一定的影响。
在设计响应式布局时，我们通常会使用 max-width 和 min-width 这类属性来控制元素的大小。注意，这些属性依赖于浏览器的默认样式。如果我们使用了 CSS Reset 之后，这些属性可能会失效。因此我们需要对 CSS Reset 进行处理，以便让它和响应式 Web 设计相结合。
对于响应式 Web 设计，我们通常需要重新定义以下 CSS 属性：
- Box-sizing
在响应式布局中，我们尤其需要控制元素的大小。为此，我们可以使用 box-sizing 属性来控制盒子模型。在 CSS Reset 中，一般会设置：
* {
box-sizing: border-box;
}这段代码的含义是将所有 HTML 元素的宽度和高度包含在 border 和 padding 内。显然，这种盒子模型不适合响应式 Web 设计。因此，我们需要修改这行代码为：
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}这段代码将在三个主流浏览器中设置 box-sizing 属性的值为 "border-box"。这可以避免在盒子模型计算时出现边界溢出的问题。
- 清除浮动
在 CSS Reset 中，一般会对浮动元素进行清除。但是，在响应式 Web 设计中，我们通常需要使用浮动布局。因此，我们需要重新定义清除浮动的代码：
-- -------------------- ---- ------- --------------- - -------- ---- -------- ------ ------- -- ------ ----- ----------- ------- - --------- - -------- ------------- - -- ----- ---- ------ -- - ---- --------- - ------- --- - --------- - -------- ------ -
以上代码定义了一个类名为 "clearfix" 的样式，可以用于清除浮动。使用这个样式时，在需要清除浮动的元素上添加 class="clearfix" 即可。
- 自适应图片
在响应式 Web 设计中，我们需要使用自适应图片，以确保图片可以和布局动态调整。自适应图片可以很容易地通过 max-width 属性实现。在 CSS Reset 中，我们通常为所有图片添加以下样式：
img {
border: 0;
max-width: 100%;
vertical-align: middle;
}这段代码会为所有图片设置最大宽度为 100%，充分利用图片的原始尺寸，并保证图片宽度不会超过父元素的宽度。
代码示例
为了更好地理解上述规则，下面是一个完整的 HTML 文件示例：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ---------------- --
---------- ----- ---- --- ---------------
-------
-- --- ----- --
- -
------- --
-------- --
------- --
----------- -----------
------------------- -----------
---------------- -----------
-
-- ---- --
--------------- -
-------- ----
-------- ------
------- --
------ -----
----------- -------
-
--------- -
-------- -------------
-
-- ----- ---- ------ --
- ---- --------- -
------- ---
-
--------- -
-------- ------
-
-- ----- --
--- -
------- --
---------- -----
--------------- -------
-
-- ----- --
------ ------ --- ----------- ------ -
---------- -
------ ------
------- - -----
-
-
------ ------ --- ----------- ------- -
---------- -
------ -------
------- - -----
-
-
--------
-------
------
---- ---------------- ----------
---- ----------------- ---------- --
------
-------
-------在上述示例中，我们对 CSS Reset 进行了修改，同时定义了响应式布局和图片自适应的样式。运行该文件时，可以看到图片大小随着浏览器窗口大小而动态调整。
总结
CSS Reset 是一种极具效益的样式定义方法。但是，我们需要注意 CSS Reset 和响应式 Web 设计的结合，以避免样式冲突。在重定义样式时，我们需要进行慎重的考虑，以确保合理性。 通过上述规则的实践，可以在实现响应式 Web 设计的同时，实现高效的样式构建。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ef67d6f6b2d6eab3967107