Html 响应式布局的推荐宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10026751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Recommended widths for responsive layouts
提问by Jürgen Paul
What do you recommended should be the widths I should use for a responsive layout?
您推荐的响应式布局的宽度应该是多少？
/* Default Width: */
.container { width: 940px; margin: 0 auto; }
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
回答by powerbuoy
I've started using "320 and up"'s widths which are as follows:
我已经开始使用“320 及以上”的宽度，如下所示：
Note that they go from small to large not the other way around though. This is more in line with progressive enhancement and definitely preferred anyway: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
请注意，它们是从小到大的，而不是相反。这更符合渐进增强，无论如何绝对是首选：http: //bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
http://stuffandnonsense.co.uk/projects/320andup/
http://stuffandnonsense.co.uk/projects/320andup/
// Default styling here
// Little larger screen
@media only screen and (min-width: 480px) {
}
// Pads and larger phones
@media only screen and (min-width: 600px) {
}
// Larger pads
@media only screen and (min-width: 768px) {
}
// Horizontal pads and laptops
@media only screen and (min-width: 992px) {
}
// Really large screens
@media only screen and (min-width: 1382px) {
}
// 2X size (iPhone 4 etc)
@media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(-o-min-device-pixel-ratio: 3/2), only screen and
(min-device-pixel-ratio: 1.5) {
}
If you use Sass, here's a little trick I've been using:
如果你使用 Sass，这里有一个我一直在使用的小技巧：
$laptop-size: "only screen and (min-width: 768px)";
$desktop-size: "only screen and (min-width: 1382px)";
// etc
And then
进而
@media #{$laptop-size} {
// Styling here...
}
This way you can easily change widths in one place also you don't have to write the whole thing every time.
通过这种方式，您可以轻松地在一个地方更改宽度，而且您不必每次都编写整个内容。
回答by sandeep
There is no recommendedwidth for responsive layout. It's totally depends upon your layout structure. Layout Structuremeans use MEDIAQUERIESwhen you want any specific changes on an specific width or when your layout broke any specific screen width.
响应式布局没有推荐的宽度。这完全取决于您的布局结构。Layout Structure意味着当您想要对特定宽度进行任何特定更改或当您的布局破坏任何特定屏幕宽度时使用MEDIAQUERIES。
回答by o.v.
If you are looking for best/common practices and particular widths applied when using responsive layouts, I'd suggest you look into grid systemsreadily available. A quick google search yields a lot of results, but one of my favourite ones would be the 1140 grid from cssgrid.net (site no longer available) - I very much agree with their logic on choosing the measurements. Verbatim:
如果您正在寻找使用响应式布局时应用的最佳/常见做法和特定宽度，我建议您查看现成的网格系统。快速的谷歌搜索会产生很多结果，但我最喜欢的一个是来自 cssgrid.net（站点不再可用）的 1140 网格 - 我非常同意他们选择测量的逻辑。逐字：
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.
1140 网格非常适合 1280 显示器。在较小的显示器上，它变得流畅并适应浏览器的宽度。废品1024！设计一次 1140 为 1280，只需很少的额外工作，它就可以适应任何显示器，甚至是移动设备。
If this is not the kind of answer you were looking for, please rephrase the question.
如果这不是您想要的答案，请重新表述问题。
