<html> <body> <div id="wrapper"> <p>Stuff in here</p> </div> </body> </html>
大多数时候,在这里或在网络上的示例中,人们建议您将宽度设置应用于#wrapper,而不是< body> ;. 是否有根本原因? 例如,在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,似乎没关系.只要布局变得更先进…
解决方法
所以 – 我想我会说,大多数人使用一个包装器,因为他们看到它在一流的或在线教程.我认为在很大程度上,这是许多人的习惯.我会离开身体,并保持包装器为0自动,并使用最大的宽度,像你有.这只是EI 8和之前 – can I use media queries ? – 也许你应该检测EI 8并制作一个独特的样式表.我发现在定义mobil的所有内容之后,我的媒体查询只是在之后的几行迭代 –