menu
書いてる野郎
orebike@gmail.com
メディアクエリとよばれるもので、表示媒体によって適用するスタイルを切り替えることができる。
デフォルトが小さい画面でデカイ画面がその拡張版という順番で設計する方式。
具体的な記述としては min の指定を順に拡大するように書いていく。
この逆は、PC等のデカイ画面がデフォルトでスマホ等の小さい画面がそのサブバージョンという順番で設計する方式
具体的な記述としては max の指定を順に縮小するように書いていく。
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) { }