https://developer.mozilla.org/ja/docs/Learn_web_development/Core/CSS_layout/Media_queries
- CSS Media Query
- CSSにおいてデバイスの特性で条件分岐を行うしくみ
@media MEDIA_TYPE and (MEDIA_FEATURE_RULE) {...}の形式で記述するMEDIA_TYPEall/print(印刷時) /screen（通常表示）のいずれか
MEDIA_FEATURE_RULE- リスト
(100px <= width < 500px)など- この記法は range syntax というもので、2023年頃から使えるようになった
- 以前は
(min-width: 100px) and (max-width: 499px)と書かなければならず、つらかった
- 以前は
- この記法は range syntax というもので、2023年頃から使えるようになった
(orientation: portrait OR landscape): デバイスの向き- 縦と横のサイズが等しい場合は
portraitにマッチするらしい
- 縦と横のサイズが等しい場合は
(hover: none OR hover): 要素の上にポインターを乗せることが出来るか否か- 単純に
:hoverを書くと、スマホでタップした後に指を離してもその状態が継続するため、これを避けたい時（PCでマウスポインターが乗ったときだけ変化をつけたい場合）に@media (hover: hover)の
- 単純に
(not (hover: hover))のような形で否定を記述できる- 条件が1つだけの場合は括弧がいらないらしい？
- OR は
@media screen and (width >= 600px), screen and (orientation: landscape)という感じで、カンマ,を使って並列させる