css – 我们应该在div#wrapper上设置width吗？

很多人的 HTML 标记如下所示：

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

大多数时候,在这里或在网络上的示例中,人们建议您将宽度设置应用于#wrapper,而不是< body&gt ;. 是否有根本原因？例如,在techniques for gracefully degrading media queries的一篇文章中,并给出了关于技术1：不要做的一些上下文：

The elephant in the room is Internet Explorer for the desktop.
With a mobile-first solution,large screens will display the content
in one column,resulting in a painful reading experience for the user,
way past the established maximum for comfort: 50 to 75 characters.
It might be worth setting a max-width property in your main container and then upping that max-width in a media query.

和他们的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,似乎没关系.只要布局变得更先进…

解决方法

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

所以 – 我想我会说,大多数人使用一个包装器,因为他们看到它在一流的或在线教程.我认为在很大程度上,这是许多人的习惯.我会离开身体,并保持包装器为0自动,并使用最大的宽度,像你有.这只是EI 8和之前 – can I use media queries ? – 也许你应该检测EI 8并制作一个独特的样式表.我发现在定义mobil的所有内容之后,我的媒体查询只是在之后的几行迭代 –

css – 我们应该在div#wrapper上设置width吗？

解决方法

相关文章