web-dev-qa-db-ja.com

モバイルレスポンシブデザインの作成に使用する最も重要なメディアクエリはどれですか？

モバイル画面サイズにはさまざまなメディアクエリがあります。レスポンシブモバイルサイトを設計するときに、それらすべてを収容するのは圧倒的です。モバイル用に設計するときに使用する最も重要なものはどれですか？利用可能なメディアクエリの概要を説明する非常に良い仕事をしているこの記事を見つけました： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
cssmobileresponsive-designmedia-queries
42
Matt

Twitter's Bootstrap を次の4つのメディアクエリだけで取得することをお勧めします。

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

編集：元の回答（上記）は、Bootstrapバージョン2から取得しました。Bootstrap=は、バージョン3でメディアクエリを変更しました。 768pxより小さいデバイスの明示的なクエリ。このプラクティスはモバイルファーストと呼ばれることもあります。メディアクエリ以外のすべてがすべてのデバイスに適用されます。メディアクエリブロック内のすべては拡張され、 。レスポンシブデザインの進歩的な強化と考えてください。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Bootstrap 3のドキュメント で確認してください。

85
cjlarose

  1. 割合で設計し、最初は15インチ以上の画面用に最適化します。

  2. 携帯電話で見たいコンポーネントを確認します。重要なコンテンツを残し、機能しない要素や小さな画面を乱雑にする要素を削除します。これらのスタイルは、@ media（max-width：480px）内に含めることができます{...}

  3. 状況が10インチ以下になったら、マウスではなく指のボタンとインタラクティブコンポーネントを再設計します。@ media（max-width：767px）{...}

  4. ブラウザの幅を縮小します。物事があまり良くない場合は、コンソールにアクセスして、どのスタイルを変更できるか、または再設計または削除する必要があるアイテムを見つけます。発生する画面幅をマークし、メディアクエリを作成します。

  5. 最後に、メディアクエリを確認して、それらの一部をグループ化できるかどうかを確認します（つまり、幅が750ピクセルと767ピクセルの場合は、767で組み合わせることもできます）。

JQueryに慣れている場合は、追加できます

$(window).resize(function(){
  console.log($(window).width());
});

現在の画面サイズを取得します。適切な測定のために、いくつかのピクセルを追加します。

8
Jonathan Tonge

@cjlaroseが参照する最初のTwitter Bootstrapコードは、980pxから1200pxの幅のディスプレイ用にメインCSSを構築していることを前提としているため、基本的にデスクトップ設計から適応しますそれから他のすべての。

Twitterが "mobile first" in Bootstrap 3.に変わったのを見てうれしいデスクトップからではなく、最小サイズから始めます。

特定のサイトでは、そこにリストされているものや他のリストにあるものとは異なるクエリが必要な場合があることに注意してください。 クエリは、設定テンプレートに基づいてではなく、contentの要求に応じて追加する必要があります。

以下は、私が最も便利だと思ったメディアクエリです。これらはほんの一例です。

/* Start with baseline CSS, for the smallest browsers. 
   Sometimes I put this into a separate css file and load it first.
   These are the "mobile first" styles. */

...


/* Then progressively add bigger sizes from small to large */

/* Smartphones start somewhere around here */
@media (min-width: 300px) {
}

/* You might do landscape phones here if your content seems to need it */
@media (min-width: 450px) {
}

/* Starting into tablets somewhere in here */
@media (min-width: 600px) {
}

/* Perhaps bigger tablets */
@media (min-width: 750px) {
}

/* Desktop screen or landscape tablet */
@media (min-width: 900px) {
}

/* A bit bigger if you need some adjustments around here */
@media (min-width: 1100px) {
}

/* Widescreens */
@media (min-width: 1500px) {
}

最も重要なことは、これらのすべてが必要なわけではないこと、またはコンテンツの外観に応じて数値を変更することです。ブレークポイントをいくつまたはどこに配置するかについて、本当に難しいルールはないと思います。コンテンツは非常に単純なので、たった1つのブレークポイントしか必要としないサイトを現在作成していますが、上記のコードのように見えるサイトも作成しました。

Retinaディスプレイコードは含めませんでした。これは、高解像度ディスプレイで通常解像度の画像を高解像度の画像に切り替える場合に便利ですが、それ以外の場合はそれほど便利ではありません。

5
nwalton