Question

你推荐的应该是我应该用于响应式布局的宽度？

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

Answer 1

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

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

Answer 2

响应式布局没有推荐宽度。这完全取决于您的布局结构。 Layout Structure表示如果您希望在特定宽度上进行任何特定更改，或者当您的布局突破任何特定屏幕宽度时，请使用 MEDIAQUERIES 。

Answer 3

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

1140网格非常适合1280显示器。在较小的显示器上它变得流畅并适应浏览器的宽度。废料1024！设计一次在1140年1280，并且额外的很少工作，甚至可以适应任何监视器移动。

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

响应式布局的建议宽度

3 个答案: