2019年03月5日(火)

[CSS]メディアクエリとは異なる、レスポンシブ対応のモジュール式コンポーネントの実装に適したコンテナクエリ

• 0
• 172
• 34
• 148

最近ではデザインもJavaScriptもモジュール式のコンポーネント化が進んでおり、HTMLとCSSでも徐々に浸透している流れですが、完全に対応できているとは言えない状況です。例えば、メディア クエリはページレイアウトではうまく機能しますが、モジュール式のコンポーネントを実装するのは難しくなっています。

レスポンシブ対応のモジュール式コンポーネントを実装する際に適したコンテナ クエリの考え方を紹介します。

Container Queries: Once More Unto the Breach
by Mat Marquis

下記は各ポイントを意訳したものです。
※A List Apartと著者の許可を得て翻訳しています。

メディア クエリの問題点

複数のコンテナで使用されるモジュールをビューポートベースのメディア クエリでスタイルすることは、そのスタイ...