メディアクエリとは何ですか？
メディアクエリは、CSS3で導入されたCSSのテクニックです。
これは、使用しています@media一定の条件が真である場合にのみ、CSSプロパティのブロックが含まれるようにルールを。
例
ブラウザのウィンドウが500pxなどよりも小さい場合、背景色が水色に変わります。
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
»それを自分で試してみてください ブレークポイントの追加
以前、このチュートリアルでは、行と列を含むWebページを作って、それが応答したが、それは小さな画面で良く見えませんでした。
メディアクエリはそれで助けることができます。 私たちは、デザインの特定の部分は、ブレークポイントのそれぞれの側に異なる動作をしますブレークポイントを追加することができます。
デスクトップ
電話
768pxにブレークポイントを追加するには、メディアクエリを使用します。
例
画面（ブラウザウィンドウ）が768pxよりも小さくなる場合には、各列は100％の幅を持っている必要があります。
/* 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%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
»それを自分で試してみてください 常にモバイルファーストのための設計
モバイルファーストは、デスクトップまたは任意の他のデバイス（これは、より高速な小型のデバイス上のページ表示を行います）のために設計する前モバイル設計することを意味します。
これは、我々のCSSのいくつかの変更を加える必要があることを意味します。
代わりに変えるスタイルの幅が768pxよりも小さくなったときに幅が768pxよりも大きくなったとき、我々はデザインを変更する必要があります。 これは、私たちのデザインのモバイルファーストを行います：
例
/* For mobile phones: */
[class*="col-"] {
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%;}
}
»それを自分で試してみてください 別のブレークポイント
あなたが好きなだけブレークポイントを追加することができます。
また、タブレットと携帯電話間のブレークポイントを挿入します。
デスクトップ
タブレット
電話
私たちは、1以上のメディア（600PXで）クエリ、および600PX（しかしより小さい768px）よりも大きいデバイス用の新しいクラスのセットを追加することで、次の操作を行います。
例
クラスの2組がほぼ同じであることに注意してください、唯一の違いは、名前（あるcol-とcol-m-
/* For mobile phones: */
[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%;}
} »それを自分で試してみてください 我々が、同一クラスの2セットを持っていることを奇妙に思えるかもしれないが、それは私たちに、HTMLでの機会を与え、各ブレークポイントで列に何が起こるかを決定します：
HTMLの例
デスクトップの場合：
第一及び第三項では、両方の3列ごとにまたがるます。 中間部は6列にまたがるます。
タブレットの場合：
最初のセクションは、第9にまたがる、3列にまたがるし、3番目のセクションには、最初の2つのセクションの下に表示され、それが12列にまたがるます。
<div class="row">
<div class="col-3 col-m-3">...</div>
<div
class="col-6 col-m-9">...</div>
<div
class="col-3 col-m-12">...</div>
</div>オリエンテーション：縦/横
メディアクエリは、ブラウザの向きに応じて、ページのレイアウトを変更するために使用することができます。
あなたは、ブラウザのウィンドウは、その高さは、いわゆる「横」の向きよりも広くなっている場合にのみ適用されるCSSプロパティのセットを持つことができます。
例
向きが横向きであるかどうかのWebページには、水色の背景を持っています。
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} »それを自分で試してみてください