CSSでのメディア

@mediaを使用すると、異なるメディアタイプに対して異なるスタイルを定義できます.
次のコードは、ドキュメントの幅が300ピクセル未満の場合、バックグラウンド・プレゼンテーションを変更することです.

@media screen and (max-width: 300px) {
   body {
      background-color:lightblue;
  }
}

@mediaは、画面サイズに応じて異なるスタイルを設定できます.特に、設計応答式のページを設定する必要がある場合は、@mediaが便利です.ブラウザのサイズをリセットすると、ブラウザの幅と高さに基づいてページが再レンダリングされます.CSS使用法:

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

コードで遭遇したのは、次のような状況です.

media="screen"

ドキュメントを検索するとscreenメディアのタイプがわかります.パソコンの画面、タブレット、スマートフォンなどに使用されます.