[CSS]@mediaとは?

1494 ワード
TIL CSS テキストリンク
@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
    Webpackのチュートリアルでは、基本的なウェブサイトのウェブパック4または5をゼロから設定する方法
    Drawable,Bitmapの違い