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

2015/01/072015/03/01

主要な 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) {
}

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