Bau*_*umr 12 css html5 semantic-markup css3 media-queries
很多人的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>- 考虑到标准网站？
任何潜在的错误？我在这里尝试过,似乎没问题.如果布局变得更先进,那该怎么办...
好吧，我猜你想使用尽可能少的元素。然而，在很多情况下，#page-wrapper 和 body 是不可互换的。在许多情况下，您需要使用 body 作为背景颜色而不是 html 标签。在这些情况下（例如加权页脚），您需要正文来拉伸 html，并且需要一个包装器来包含内容，也许将内容居中，并强制正文拉伸并包含它。
所以 - 我想我会说，大多数人使用包装器是因为他们在第一堂课或在线教程中看到了它。我认为在很大程度上，这是许多人的习惯。我会将主体保留原样，并将包装器边缘设置为 0 auto 并使用像您一样的最大宽度。只是 EI 8 及之前的版本 -我可以使用媒体查询吗？- 也许您应该检测 EI 8 并制作一个独特的样式表。我发现在为 mobil 定义了所有内容之后，我的媒体查询仅是几行迭代 -