メディアクエリで指定する条件

　Media Queriesの概要と記述例について前回紹介しました。

→　メディアクエリで画面サイズごとCSSを切り替えるには？

Media Queriesの条件分岐に利用できる指定方法には、これまでにご紹介したものも含め、一例を以下でご紹介します。

記述例

width

　横幅を条件にしてCSSを制御します。
※スクロールバーを表示する場合は、スクロールバーの幅も含みます。

max-width

　表示領域が700px以下のとき適用します。

@media screen and (max-width: 700px) {
   /* 700px以下の場合 */
}

min-width

　表示領域が700pxを超える場合適用します。

@media screen and (min-width: 700px) {
   /* 700px以上の場合 */
}

複数条件

　andで最大幅と最小幅を両方指定します。

@media screen and (max-width: 800px) and (min-width: 400px) {
   /* 800px以下～400px以上の場合 */
}

height

　縦幅を条件にしてCSSを制御します。
※スクロールバーを表示する場合は、スクロールバーの幅も含みます。

max-height

　高さが700px以下のとき適用します。

@media screen and (max-height: 700px) {
   /* 高さ700px以下の場合 */
}

min-height

　高さが700pxを超える場合適用します。

@media screen and (min-height: 700px) {
   /* 高さ700pxを超える場合 */
}

複数条件

　andで横幅と縦幅を両方指定します。

@media screen and (max-width: 800px) and (max-height: 500px) {
   /* 横幅800px以下で、高さ500px以下の場合 */
}

device-width

　画面の横幅を条件にしてCSSの適用を制御します。

PC：(ブラウザのウインドウ幅に関係なく)ディスプレイの幅を示。
スマートフォン：(端末の画面の物理的な解像度ではなく)ブラウザの仮想的な解像度での横幅を表示。

例）iPhone5の画面の横方向の物理的なピクセル数は640pxです。
　　しかし、device-widthの値は320pxです。

@media screen and (max-device-width: 1024px) and (min-device-width: 640px) {
   /* 1024px以下～640px以上の場合 */
}

device-height

　画面の高さ(縦方向の長さ)を条件にしてCSSの適用を制御します。
「device-width」と同じく、PCならディスプレイの高さを示し、スマートフォンならなら、ブラウザの仮想的な解像度での高さを示します。

例）iPhone5なら画面の縦方向の物理的なピクセル数は1,136pxです。
　　しかし、device-heightの値は568pxです。

@media screen and (max-device-height: 768px) and (min-device-height: 480px) {
   /* 768px以下～480px以上の場合 */
}

orientation

　端末の向きを条件にしてCSSの適用を制御します。
縦置き：「portrait」
横置き：「landscape」

@media screen and (orientation: portrait) {
   /* 縦置き(縦長)の場合 */
}
@media screen and (orientation: landscape) {
   /* 横置き(横長)の場合 */
}