Media (メディア) Queries(クエリ) の再考のススメ

• ウェブサイトで様々な演出を試みるとき、レスポンシブデザインが崩れるデバイスがある。従来のメディアクエリの知識をもう少し深めることにしよう。

• Responsiveレスポンシブ のチェックは万全か？

• レスポンシブデザインには必須であるメディアクエリだが、どうもこのメディアクエリでレイアウトが崩れてしまっているサイトが多い。恐らく制作サイドでモバイルビューを万全を期してチェックされていないのが原因だろう。メディアクエリは奥が深く頭を使う。

• メディアの高さ(height)に依存するレイアウトを採用するとメディアクエリがより重要になりブレイクポイントは多様化する。

• 例えば、CSSに「height: 30%」などと記述する場合がある。デバイスの「pixel 2(411×731)」と「pixel 2 XL(411×823)」では同じ幅を持つが、高さは異なる。この存在をチェックしていないと「width」だけのメディアクエリを当たり前のように記述してしまう。

• 幅が同一サイズだが高さが違うデバイスの例

• 「pixel 2 (411×731)」と「pixel 2 XL(411×823)」の場合

•  @media only screen and (device-width : 411px) and
    (device-height : 731px) { 
   }
   @media only screen and (device-width : 411px) and
    (device-height : 823px) { 
   }

• 「iPhone 6/7/8 (375×667)」と「iPhone X (375×812)」の場合

•  @media only screen and (device-width : 375px) and
    (device-height : 667px) { 
   }
   @media only screen and (device-width : 375px) and
    (device-height : 812px) { 
   }

• 「landscape」(横方向)でサイズが961px以上を対象にする場合

• これはデバイスを「landscape」(横方向)にして「幅960pxまでをスマホ、幅961pxからをタブレット、PCを対象にする」という狙いがある。

•  @media screen and (orientation: landscape) and
    (min-device-width:961px) { 
   }

• 現時点では、上記メディアクエリを使うとレスポンシブデザインの正確さが向上し、ブレイクポイントをかなり減少できたと思う。