响应式设计中最常使用的视口大小是多少？

我看到了一些不同的建议，从非常详细的建议（如此处）到更简短的建议（如google（此处））。所以我想知道@media屏幕最适合使用什么尺寸。

这可能不是一个“统计数据”，但请看一下开始大量使用的Twitter Bootstrap。

https://github.com/twitter/bootstrap/blob/master/less/response.less

简而言之：

• <= 767像素
• 768px – 979px
• 980px – 1199px
• > = 1200像素

我猜这取决于设计，每个版本可能有所不同。这还取决于您使用100％的流体还是更改断点。

我倾向于使用以下一些内容，通常大尺寸在断点之间根本没有太大变化：

@media screen and (min-width:320px){} // mobile portrait
@media screen and (min-width:480px){} // mobile landscape
@media screen and (min-width:768px){} // ipad portrait
@media screen and (min-width:1024px){} // browser, ipad landscape
@media screen and (min-width:1200px){} // browser
@media screen and (min-width:1600px){} // browser

试图涵盖所有不同的android etc分辨率毫无意义...有太多。

有时，由于滚动条，断点不会在实际大小上触发，每个浏览器都有不同的规则。明智的做法是将每个@media的像素减少20px，以确保它们触发。有时，我将min-width：320px换成max-width：480px，因为在320以下时可能什么也不会显示。