响应式布局的建议宽度

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.