メディアクエリ
更新日:
用語解説
メディアクエリは、画面の幅や向きなどの条件に応じて、適用するCSSを切り替える仕組みです。レスポンシブWebデザインを実現する主要な技術です。
■ 試験で押さえるポイント
CSSの@media規則で条件を書き、条件を満たすときだけ列数や文字サイズを変えます。
機種ではなく画面幅などで判定するため、未知の端末にも対応しやすくなります。
狭い画面向けを基本にし、広い画面で配置を加える設計をモバイルファーストといいます。
■ 選択肢での判断ポイント
レスポンシブデザインとの関係やブレークポイントの考え方を押さえます。
例: 画面幅が768px以上なら2列、未満なら1列にする指定です。