25

您建议我应该为响应式布局使用的宽度是多少？

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

3 回答 3

44

我已经开始使用“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...
}

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

于 2012-04-05T10:47:58.447 回答
26

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

于 2012-04-05T10:22:32.357 回答
4

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

1140 网格非常适合 1280 显示器。在较小的显示器上，它变得流畅并适应浏览器的宽度。报废1024！在 1140 为 1280 设计一次，只需很少的额外工作，它就能适应几乎任何显示器，甚至是移动设备。

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

于 2012-04-05T10:36:00.960 回答