CSS / Media Queries

CSS / Media Queries

メディアクエリとよばれるもので、表示媒体によって適用するスタイルを切り替えることができる。

Mobile first

デフォルトが小さい画面でデカイ画面がその拡張版という順番で設計する方式。

具体的な記述としては min の指定を順に拡大するように書いていく。

この逆は、PC等のデカイ画面がデフォルトでスマホ等の小さい画面がそのサブバージョンという順番で設計する方式

具体的な記述としては max の指定を順に縮小するように書いていく。

特定の画面サイズ用CSSを作る

max-width 〜 以下の横幅
min-width 〜 以上の横幅

aspect-ratio は (横 / 縦) ということは値がデカイほうがより横長、小さいとより縦長ということですな

画面幅が 980px 未満と 980px 以上で要素のデカさを変えたい場合はこうなる。

@media (max-width:979px){
    div{
        width: 100%;
    }
}
@media (min-width: 980px){
    div{
        width: 70%;
    }
}

メディアクエリの詳細度

メディアクエリは詳細度の勘定に入らない。 なので詳細度が同じなら単純に後から書いたやつが有効になる。

条件が重複するメディアクエリ

同一スタイルの場合

これも詳細度の場合と同じで条件は関係なく後で書いてあるほうが有効になる。

異スタイルの場合

両方適用される。

システムのダークモード状態

システムのダークモード設定により分岐する

@media (prefers-color-scheme: dark) {
}

システムの視覚効果抑制状態

視覚効果を激しく行う(拡大縮小移動変形色変化アニメーションの多用)サイトを大人しくさせたいという目的で、 一部のシステムで「Reduce motion」というシステム設定がある。これを読み取る。

@media (prefers-reduced-motion) {
}
css/selector/media_queries.txt · 最終更新: 2020-12-21 17:53 by ore