Review

Media Queries

<scroll>

メディアクエリの形式と順番

メディアクエリで(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) {■}