異なる形式の混合

メディアクエリの記述形式を異なる形式で混合させて検証する。

• (orientation: portrait) で設定 @media (orientation: portrait) and (min-width: …px) {…}
• (orientation: landscape) で設定 @media (orientation: landscape) and (min-width: …px) {…}
• 幅と高さを設定 @media screen and (device-width : 411px) and (device-height : 731px) {…}
• 幅を設定 @media screen and (min-width: …px) {…}

検証したブレークポイントの順

15種類のブレークポイントを以下の通り用意した。サイズの小さい方から順にモバイルファーストで記述して検証する。

• モバイルの(portrait)を(min-width:320px)から次のブレークポイントまでと想定する。(iPhone SEが最短の320px) @media (orientation: portrait) and (min-width:320px) {…}
• モバイルの(portrait)を(min-width:360px)から次のブレークポイントまでと想定する。 @media (orientation: portrait) and (min-width:360px) {…}
• モバイルの(portrait)を(min-width:411px)から次のブレークポイントまでと想定する。 @media (orientation: portrait) and (min-width:411px) {…}
• デバイス(Pixel 2)を単独で設定する。デバイス(Pixel 2 XL)と幅が同一で、高さが異なる。 @media screen and (device-width : 411px) and (device-height : 731px) {…}
• デバイス(Pixel 2 XL)を単独で設定する。デバイス(Pixel 2)と幅が同一で、高さが異なる。 @media screen and (device-width : 411px) and (device-height : 823px) {…}
• モバイルの(landscape)を(min-width:568px)から次のブレークポイントまでと想定する。(iPhone SEが最短の568px) @media (orientation: landscape) and (min-width:568px) {…}
• モバイルの(landscape)を(min-width:640px)から次のブレークポイントまでと想定する。 @media (orientation: landscape) and (min-width:640px) {…}
• タブレット・PCの(portrait)を(min-width:720px)からに設定する(Note PCは最短の720px)。 @media (orientation: portrait) and (min-width:720px) {…}
• タブレット・PCの(landscape)を(min-width:731px)からに設定する(Pixel 2は最短の731px)。 @media (orientation: landscape) and (min-width:731px) {…}
• タブレット・PCの(portrait)を(min-width:768px)からに設定する(iPadは768px)。 @media (orientation: portrait) and (min-width:768px) {…}
• タブレット・PCの(landscape)を(min-width:812px)からに設定する(iPhone Xは812px)。 @media (orientation: landscape) and (min-width:812px) {…}
• タブレット・PCの(portrait)を(min-width:1024px)からに設定する(iPad Proは1024px)。 @media (orientation: portrait) and (min-width:1024px) {…}
• タブレット・PCの(landscape)を(min-width:1024px)からに設定する(iPadは1024px)。 @media (orientation: landscape) and (min-width:1024px) {…}
• タブレット・PCのを(min-width:1280px)からに設定する(Note PCは1024px)。 @media screen and (min-width:1280px) {…}
• タブレット・PCを(min-width:1680px)からに設定する。 @media screen and (min-width:1680px) {…}