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

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

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

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

请注意，它们是从小到大，而不是相反。这更符合渐进增强，并且无论如何绝对是首选：

• Brad Frost - 移动优先的响应式网页设计 https://bradfrost.com/blog/post/mobile-first-responsive-web-design/
• stuffandnonsense.co.uk - 320 及以上 https://stuffandnonsense.co.uk/blog/320-and-up

// 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

And then

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

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