メディアクエリの形式と順番
メディアクエリで(portrait)や(landscape)を使って、記述の順番や形式を検証してみよう。
・異なる形式で15種類のブレイクポイントを設定。各々の画面サイズで対象のブレークポイントだけを右欄に表示するようにした。
・横サイズ(device-width: )が同一で縦サイズ(device-height: )が異なるデバイス向けのメディアクエリも上手く表示できた。
この画面サイズのブレークポイント
@media (orientation: portrait) and (min-width:320px) {■}
@media (orientation: portrait) and (min-width:360px) {■}
@media (orientation: portrait) and (min-width:411px) {■}
@media screen and (device-width : 411px) and (device-height : 731px) {■}
@media screen and (device-width : 411px) and (device-height : 823px) {■}
@media (orientation: landscape) and (min-width:568px) {■}
@media (orientation: landscape) and (min-width:640px) {■}
@media (orientation: portrait) and (min-width:720px) {■}
@media (orientation: landscape) and (min-width:731px) {■}
@media (orientation: portrait) and (min-width:768px) {■}
@media (orientation: landscape) and (min-width:812px) {■}
@media (orientation: portrait) and (min-width:1024px) {■}
@media (orientation: landscape) and (min-width:1024px) {■}
@media screen and (min-width:1280px) {■}
@media screen and (min-width:1680px) {■}