[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) {
    
}
twitterfacebookhatenafacebook