[CSS] メディアクエリのブレイクポイントについて

主要な Media Queries の書き方

基本

ワイドスクリーン

@media only screen and (max-width: 1200px) {
}

デスクトップ

@media only screen and (max-width: 992px) {
}

小型デバイス

@media only screen and (max-width: 768px) {
}

スマートフォンなど

@media only screen and (max-width: 480px) {
}

@media only screen and (max-width: 320px) {
}

デバイスの向きで判定する

実際は「デバイスの向き」じゃなくて、長さで判定してるみたいなので扱いに注意。

縦向き

@media screen and (orientation: portrait) {
}

横向き

@media screen and (orientation: landscape) {
}

複数条件

条件を併用して指定する。

スマートフォン(縦横向き)

@media only screen and (max-width: 320px) and (max-width: 480px) {
}

iPad(横向き)

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