レスポンシブWebデザイン - メディアクエリ
メディア（メディアが）CSS3上でクエリを導入している： CSS3の@mediaクエリーを 。
あなたは異なるメディアタイプごとに異なるスタイルを定義することができ、@mediaクエリを使用してください。
例
ブラウザのウィンドウが500pxなどよりも小さい場合、背景が水色に変わります。
body {
background-color: lightblue;
}
}
»をお試しください
ブレークポイントを追加します。
我々は、Webページを作成するために、行と列を使用する前のチュートリアルでは、応答が、小さな画面と友好的ではない番組です。
メディアクエリは、私たちはこの問題を解決することができます。 我々は、ドラフトデザインの途中にブレークポイントを追加することができ、異なるブレークポイントが異なる効果を持っています。
デスクトップ
モバイルデバイス
ブレークポイントを追加768pxメディアクエリを使用します。
例
画面（ブラウザウィンドウ）が768px未満であると、各列の幅は100％です。
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
»をお試しください
携帯端末設計のための優先順位
優先順位は、移動端のデスクトップやモバイル端末のデザインを優先するように設計された他のデバイスを意味します。
これは、我々はCSSにいくつかの変更をしなければならないことを意味します。
私たちは、スタイルの変更未満768px画面が768pxよりも広くなっているときに、同じスタイルで変更する必要が画面。 次のモバイルエンドの優先順位の例は以下のとおりです。
[クラス* = "col-"] {
幅：100％;
}
唯一の画面と@media（最小幅 ：768px）{
/ *デスクトップの場合：* /
.COL-1 {幅：8.33パーセント ;}
.COL-2 {幅：16.66パーセント ;}
.COL-3 {幅：25％ ;}
.COL-4 {幅：33.33パーセント ;}
.COL-5 {幅：41.66パーセント ;}
.COL-6 {幅：50％ ;}
.COL-7 {幅：58.33パーセント ;}
.COL-8 {幅：66.66パーセント ;}
.COL-9 {幅：75パーセント ;}
.COL-10 {幅：83.33パーセント ;}
.COL-11 {幅：91.66パーセント ;}
.COL-12 {幅：100％ ;}
}
その他のブレークポイント
あなたは自分のニーズに応じてブレークポイントを追加することができます。
また、タブレットや携帯電話のデバイスは、ブレークポイントを設定することができます。
デスクトップ
タブレット
モバイルデバイス
メディアクエリを追加し、新しいスタイルを設定する（ただし、画面よりも少ないが600PX 768pxよりも大きい）600PX画面：
例
2つのクラススタイルは同じですが、異なる名前（col-とCOL-M-）ことに注意してください：
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 { width: 8.33%; }
.col-m-2 { width: 16.66%; }
.col-m-3 { width: 25%; }
.col-m-4 { width: 33.33%; }
.col-m-5 { width: 41.66%; }
.col-m-6 { width: 50%; }
.col-m-7 { width: 58.33%; }
.col-m-8 { width: 66.66%; }
.col-m-9 { width: 75%; }
.col-m-10 { width: 83.33%; }
.col-m-11 { width: 91.66%; }
.col-m-12 { width: 100%; }
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }
}
»をお試しください
上記のコードは、多くのより多く見えますが、それはまだ非常に必要であるので、彼は、異なるスタイルの画面サイズに応じて自動的に設定することができます。
HTMLの例
デスクトップの場合：
第一及び第三項では、次の3つにまたがります。 中間部のクロスドメイン6。
タブレットデバイスの場合：
最初のクロスドメイン3,9にまたがる第二セクション、クロスドメイン12の第三部：
<DIVクラス= "COL-3 COL-M-3"> ... </ DIV>
<DIVクラス= "COL-6 COL-M-9"> ... </ DIV>
<DIVクラス= "COL-3 COL-M-12"> ... </ DIV>
</ DIV>
方向：横画面/縦画面
CSSメディアクエリと組み合わせることで、あなたは別のデバイスの向き（ランドスケープ風景、ポートレートポートレート、等）のレイアウトに適応作成することができます。
構文：
orientation：portrait | landscape
- 肖像：ページの高さの可視領域内の出力デバイスを指定すると、以上の幅に等しいです。
- 風景：インター肖像状況の値が風景です