46

モバイル画面サイズにはさまざまなメディアクエリがあります。レスポンシブモバイルサイトを設計するときに、それらすべてに対応するのは大変なことです。モバイル向けに設計するときに使用する最も重要なものはどれですか？利用可能なメディアクエリの概要を説明するこの記事を見つけました：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 */
}
4

3 に答える 3

91

Twitterの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) { ... }

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

于 2012-08-21T02:34:56.600 に答える
9

  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());
});

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

于 2013-10-28T21:52:21.057 に答える
6

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

Bootstrap 3でTwitterが「モバイルファースト」に変更されたことをうれしく思います。これはメディアクエリへの最も人気のあるアプローチの1つであり、私が好む方法です。デスクトップからではなく、最小サイズから始めます。

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

これが私が最も役立つと思ったいくつかのメディアクエリです。これらはほんの一例です。

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

于 2014-01-31T05:27:20.020 に答える