[CSS]@mediaとは?

@mediaって何?

は、1つまたは複数のメディアクエリ結果に従って適用するために使用することができる.

@mediaを使用してメディアクエリーを指定すると、そのクエリーを満たすデバイスにcssブロックしか適用できません.

メディアクエリとは?メディアクエリーは、端末のタイプ(出力とスクリーン)や、一部の特性や数値(画面解像度、ビューポート幅など)に基づいてWebサイトやアプリケーションのスタイルを変更する場合に便利です.

使用方法

/* 최상위 코드 레벨 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 다른 조건부 @규칙 내에 중첩 */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

prefers-reduced-motion: no-preference

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 5s linear;
  }
}

ユーザがシステム内の不要な運動量を最小限に抑えることを要求するかどうかを検出するために使用される.

no-プリファレンス:ユーザーがプリファレンスをシステムに通知していないことを示します.

reduce:前庭運動障害のある人に不便をもたらす動作ベースのアニメーションタイプのインタフェースを削除または置換するようユーザに促す.

https://developer.mozilla.org/ko/docs/Web/CSS/@media
https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion