[css].css内でPC/スマホを割り振る

cssのみというのがミソ。

こうする

@mediaでマウス(ポインティングデバイス)操作か否かを割り振れる。

a:hover{ text-decolation:none;}
@media (pointer: fine) {
    a:hover{ text-decolation:underline;}
}

elseじゃないけど、「マウス操作じゃなかったら」も指定できる。

pointer - CSS: カスケーディングスタイルシート | MDN
pointer は CSS のメディア特性で、ユーザーが(マウスなどの)ポインティングデバイスを持っているか、もしそうならば、主要なポインティングデバイスにどれだけの正確性があるかを調べます。

一般的、基本的には@media screen and (max-width: 767.98px){}みたいにブラウザ幅準拠のレスポンシブを作ればいいんだけど、たまにそれだと都合が悪いこともある。とはいえあんまり使い所はない気もするし、逆にできることは結構増えてヤバい感じもあるんで、活用シーンとしては「:hoverはスマホだと要らないよね」で明確に振り分けたいときに使うのがいいと思う。これだけでも地味に使える。

コメント

タイトルとURLをコピーしました