レスポンシブデザインで最も頻繁に使用するビューポートサイズは何ですか？

非常に詳細な（ここのような）ものから、グーグル（ここの）のようなより短いものまで、さまざまな提案があります。だから私は@メディア画面に使用するのに最も適したサイズは何だろうと思っています。

これは「統計」ではないかもしれませんが、頻繁に使用され始めているTwitter Bootstrapを見てください。

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

要するに：

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

これはデザインによって異なると思います。これは、ビルドごとに異なる可能性があります。また、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

アンドロイドなどのさまざまな解像度をすべてカバーしようとしても意味がありません。

また、スクロールバーが原因で実際​​のサイズでブレークポイントがトリガーされないこともあります。これは、各ブラウザーに異なるルールがあります。それらがトリガーすることを確認するために@mediaごとに20pxをカットするのが賢明かもしれません。320未満では何も表示されない可能性があるため、min-width：320pxをmax-width：480pxに交換することがあります。