[html + css]styleタグでmedia指定する方法

気にしてなかった。

通常

まあ、こうですよね。

@media (pointer: fine){}
@media screen and (min-width: 1200px){}
@media screen and (max-width: 1199.98px){}
@media screen and (min-width: 1024px){}
@media screen and (max-width: 1023.98px){}
@media screen and (min-width: 768px){}
@media screen and (max-width: 767.98px){}

<style>でやっていく場合

こんな感じ。

<style media="(pointer: fine)">【中身】</style>
<style media="screen and (min-width: 1200px)">【中身】</style>
<style media="screen and (max-width: 1199.98px)">【中身】</style>
<style media="screen and (min-width: 1024px)">【中身】</style>
<style media="screen and (max-width: 1023.98px)">【中身】</style>
<style media="screen and (min-width: 768px)">【中身】</style>
<style media="screen and (max-width: 767.98px)">【中身】</style>

でも、これでいいわけで。

<style>
@media (pointer: fine){}
@media screen and (min-width: 1200px){}
@media screen and (max-width: 1199.98px){}
@media screen and (min-width: 1024px){}
@media screen and (max-width: 1023.98px){}
@media screen and (min-width: 768px){}
@media screen and (max-width: 767.98px){}
</style>

活用とか

正直思いつかない。

だけどまあ、HTMLタグで明確な差別化をやっていきたいなら使う場面もあるかもしれない。

そもそもHTML上でCSSを書くこと自体が稀。軽量化したい場合にワンチャン機会がある?ような、でも無さそうですよね。どうなんでしょう。

コメント

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