Question

许多人的HTML标记看起来像这样：

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

大部分时间在此处或网络上的示例中，人们建议您应将宽度设置应用于#wrapper，而不是<body>。

是否存在潜在原因？

例如，在techniques for gracefully degrading media queries上的文章中，为您提供技术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;
 } 
}

这是how it'd come together for IE（媒体查询已被注释掉）。

是否存在任何差异，而不是将其应用于#wrapper，我们会将其应用于<body> - 并考虑标准网站？

任何潜在的错误？ I tried it here，似乎没问题。如果布局变得更先进，那该怎么办......

Answer 1

嗯，我想尽可能少地使用元素。但是，有很多情况下#page-wrapper和body不可互换。在许多情况下，您需要使用body作为背景颜色而不是html标记。在这些情况下（例如加权页脚），您需要身体伸展html，并且您需要一个包装内容来包含内容，可能使内容居中，并强制身体伸展并包含它。

所以 - 我想我会说，大多数人都使用包装器，因为他们在第一堂课或在线教程中看到了它。我认为在很大程度上，这是许多人的习惯。我会保持身体原样并将包装器边缘设置为0 auto并使用最大宽度。它只是EI 8之前 - can I use media queries ? - 也许你应该检测到EI 8并制作一个独特的样式表。我发现在为mobil定义一切之后，我的媒体查询只有几行迭代 -

我们应该在div＃wrapper上设置宽度还是？

1 个答案: