レスポンシブWEBデザインへの対応で頻繁に使うCSSのMedia Queriesですが、条件分岐のやり方をよく忘れるので整理しました。
「iPad」「iPhone」「iPhone 5」の端末別に加えて、「ブラウザ幅」での条件分岐もまとめています。
横向き、縦向き
横向き
|
1 2 3 4 |
@media only screen and (orientation:landscape) { } [/css] |
縦向き
|
1 2 3 4 |
@media only screen and (orientation:portrait) { } [/css] |
端末別（iPad、iPhone）
iPad 横向き
|
1 2 3 4 5 6 7 |
/*1024px*/ @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) { } [/css] |
iPad 縦向き
|
1 2 3 4 5 6 7 |
/*768px*/ @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait){ } [/css] |
iPhone 5
|
1 2 3 4 5 6 |
/*568px*/ @media only screen and (min-device-width:320px) and (max-device-width:568px) { } [/css] |
iPhone 横向き
|
1 2 3 4 5 6 7 |
/*480px*/ @media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:landscape) { } [/css] |
iPhone 縦向き
|
1 2 3 4 5 6 |
/*320px*/ @media only screen and (max-device-width:320px) and (orientation:portrait){ } [/css] |
高解解像度用
|
1 2 3 4 |
@media only screen and (-webkit-min-device-pixel-ratio: 2) { } [/css] |
ブラウザ幅での条件分岐
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*1024px*/ @media screen and (max-width: 1024px) { } /*768px*/ @media screen and (max-width: 768px) { } /*480px*/ @media screen and (max-width: 480px) { } /*320px*/ @media screen and (max-width: 320px) { } [/css] |
コメント