12

很多人的 HTML 标记是这样的：

<html>
  <body>
    <div id="wrapper">
      <p>Stuff in here</p>
    </div>
  </body>
</html>

大多数情况下，在此处或网络上的示例中，人们建议您应该将宽度设置应用于#wrapper，而不是<body>.

有没有潜在的原因？

例如，在一篇关于优雅降级媒体查询技术的文章中，并为您提供有关技术 1：什么都不做的背景信息：

房间里的大象是用于桌面的Internet Explorer 。使用移动优先的解决方案，大屏幕将在一列中显示内容，从而给用户带来痛苦的阅读体验，远远超过了既定的最大舒适度：50 到 75 个字符。 在你的主容器中设置一个 max-width 属性，然后在媒体查询中增加这个 max-width 可能是值得的。

还有他们的 CSS：

#wrapper {
 _width: 460px; /* Take that, IE6! */
 max-width: 460px;
}

@media only screen and (width) {

#wrapper {
  max-width: 1200px;
 } 
}

以下是IE 的组合方式（媒体查询已被注释掉）。

考虑到标准网站#wrapper，我们将其应用于而不是将其应用于 ，会有什么区别吗？<body>

任何潜在的错误？我在这里试了一下，好像还可以。如果布局变得更高级怎么办......

4

1 回答 1

4

好吧，我猜你想使用尽可能少的元素。但是，在许多情况下，#page-wrapper 和 body 是不可互换的。在许多情况下，您需要使用 body 作为背景颜色而不是 html 标签。在这些情况下（例如加权页脚），您需要 body 来拉伸 html，并且需要一个包装器来包含内容，也许可以将内容居中，并强制 body 拉伸并包含它。

所以 - 我想我会说，大多数人使用包装器是因为他们在第一堂课或在线教程中看到了它。我认为在大多数情况下，这是许多人的习惯。我会保持身体原样并将包装器边缘设置为 0 auto 并使用像你一样的最大宽度。这只是 EI 8 及之前的版本 -我可以使用媒体查询吗？- 也许你应该检测 EI 8 并制作一个独特的样式表。我发现在为 mobil 定义了所有内容之后，我的媒体查询只是在那之后的几行迭代——

于 2012-11-05T03:22:12.450 回答