デバイスサイズによって読み込むCSSを切り替える(Media Queriesを使わない方法)

デバイスサイズによって読み込むCSSを切り替える(Media Queriesを使わない方法)

CSSをデバイスサイズによって切り替える際はMedia Queriesを使って書き分けることがほとんどだと思います。

CSS内でMedia Queriesを使って書き分けるのではなく、そもそもCSSを読み込む際にデバイスサイズによって読み込むCSSを変更する方法があったので忘れないようにメモ。

<link rel="stylesheet" href="css/midium.css" media="only screen and (min-width:480px) and (max-width:768px)">
<link rel="stylesheet" href="css/small.css" media="only screen and (max-width:479px)">

この記述だと480px~768pxまでは『midium.css』。479px以下は『small.css』を読み込みます。

あまり使うこともないかもしれませんが、もしかしたら役に立つかも。

SPONSORED LINK

CONTACT

ご意見やご感想、お仕事のご依頼など
お気軽にご連絡ください。

CONTACT FORM