响应式布局的推荐宽度[关闭]答案

【问题标题】：Recommended widths for responsive layouts [closed]响应式布局的推荐宽度[关闭]
【发布时间】：2012-04-19 02:00:38
【问题描述】：

您建议我应该为响应式布局使用什么宽度？

  /* 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) {}

【问题讨论】：

您的问题是什么？在我看来，您的列表中有一些不错的价值。
Good widths for media queries on responsive site的可能重复
@GeorgeStocker，你是这样标记的吗？我昨天这样做了，但我认为社区需要多次重复标记才能获得 SO 版主的审核。
@hotshot309 我投票决定关闭它。

标签： html css responsive-design

【解决方案1】：

如果您正在寻找使用响应式布局时应用的最佳/常见做法和特定宽度，我建议您查看现成的网格系统。快速的谷歌搜索会产生很多结果，但我最喜欢的结果之一是来自 cssgrid.net 的 1140 网格（站点不再可用）——我非常同意他们选择测量的逻辑。逐字逐句：

1140 网格非常适合 1280 显示器。在较小的显示器上它变得流畅并适应浏览器的宽度。报废1024！在 1140 为 1280 设计一次，并且几乎没有额外的工作，它会自行调整以在几乎任何显示器上工作，甚至移动。

如果这不是您要寻找的答案，请重新表述问题。

【讨论】：

问题是我希望它是响应式的，但我不希望它是流畅的。这就是为什么我想为每个屏幕尺寸设置单独的宽度。
我认为对于小于 ~900px 的任何东西，最好是流动的。市面上有很多不同的手持设备，否则您最终会遇到数百种不同的媒体查询。

【解决方案2】：

我已经开始使用“320 及以上”的宽度，如下所示：

请注意，它们是从小到大，而不是相反。这更符合渐进式增强，无论如何绝对是首选：http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

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) {

}

如果你使用 Sass，这里有一个我一直在使用的小技巧：

$laptop-size: "only screen and (min-width: 768px)";
$desktop-size: "only screen and (min-width: 1382px)";
// etc

然后

@media #{$laptop-size} {
    // Styling here...
}

这样，您可以轻松地在一个地方更改宽度，而且您不必每次都编写整个内容。

【讨论】：

您能帮我理解一下为什么您使用 min-width 而不是我经常看到的传统 max-width 吗？
我认为 Brad Frost 解释得更好：bradfrostweb.com/blog/web/mobile-first-responsive-web-design。简而言之，从最小的公分母开始确保它在任何地方都有效。就像您如何首先构建一个功能齐全的 HTML 表单，然后然后为理解它的浏览器“hijax”它。这称为渐进增强。反其道而行之，就是优雅降级，确实比 PE 优势为零。
非常好的答案，虽然关于为什么 320 及以上选择这些宽度的一些信息会很好。
@powerbuoy 你的回答在 2018 年仍然正确吗？附言。 http://stuffandnonsense.co.uk/projects/320andup/ 坏了
@Flo 个人我只是在需要时打破。为了保持一致，我通常将我的数字存储在 SASS 变量中，但我很少关心特定的设备。等不及元素查询或它们将被调用的任何内容。

【解决方案3】：

响应式布局没有推荐宽度。这完全取决于您的布局结构。 Layout Structure 表示当您想要对特定宽度进行任何特定更改或当您的布局破坏任何特定屏幕宽度时使用 MEDIAQUERIES。

【讨论】：