画面のheightやwidthで適応させるCSS(スタイル)を指定できます。
指定可能な条件は以下の通りです。
- height
- width
- device-height
- device-width
- orientation(画面の向き)
例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@media screen and (max-height: 800px) { // heightが800px以下の場合 color: white; } @media screen and (min-width: 900px) { // widthが900px以上の場合 } @media screen and (max-device-height: 500px) and (min-device-height: 900px) { // 900px以下かつ500px以上の場合 } @media screen and (orientation: portrait) { // 画面の向きが縦の場合 } @media screen and (orientation: landscape) { // 画面の向きが横の場合 } |