web-dev-qa-db-ja.com

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

非常に詳細な（ here などの）提案から、google（ here ）のようなより簡潔な提案まで、さまざまな提案があります。 @media screenで使用するのに最適なサイズは何だろうと思っています。

responsive-webdesignmedia-queries
8
alfish

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

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

要するに：

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

これは設計に依存していると思いますが、これはビルドごとに異なる場合があります。また、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などの解像度をカバーしようとしても意味がありません...非常に多くあります。

また、スクロールバーが原因でブレークポイントが実際のサイズでトリガーされない場合があります。スクロールバーには、ブラウザーごとに異なるルールがあります。 @mediaごとに20ピクセルをカットして、トリガーされるようにするのが賢明かもしれません。 320の下では何も表示されない場合があるため、min-width：320pxをmax-width：480pxに交換することがあります。

7
DBUK