CSS基礎 練習問題 7：CSSメディアクエリ
画面幅が768px以上の時だけ、パディングを16pxから32pxに変更したい場合、正しいCSSの書き方はどれですか？
- @media (min-width: 768px) { .box { padding: 32px; } }
- @breakpoint 768px { .box { padding: 32px; } }
- @screen 768px { .box { padding: 32px; } }
- @responsive 768px { .box { padding: 32px; } }
- @mobile 768px { .box { padding: 32px; } }
正解と解説を見る
正解：@media (min-width: 768px) { .box { padding: 32px; } }
レスポンシブデザインを実装するには`@media`クエリを使用します。`@media (min-width: 768px)`で画面幅768px以上の場合のスタイルを指定できます。