古いサイトや他人様の書いたコードを見ると
知らない@mediaの書き方が結構あったので念のため調べてみた。
結論
@media(max-width:500px){}
といった一般的な書き方でＯＫ。
他の色々な書き方
@media screen and
@mediaの後に screen and とか all and と書いてあるのをたまに目にする。
実は、「結論」に載せた
@media(max-width:500px){} という書き方は、
@media all and (max-width:500px){} を省略したものらしい。
allの部分はデバイスの種類を指定できるようになっており、
all（すべてのデバイス）の他に、print（プリンター）やspeech（スピーチシンサイザ）や
screen（printやspeechを除いたもの全て。一般的なＰＣやスマホ。）がある。
なので、例えば
@media screen and (max-width:500px){}は
デバイスの種類がscreenでなおかつその幅が500px以下の場合を表す。
つまり、プリンタやスピーチシンセサイザを無視するなら
allもscreenもほぼ変わらないはずなので
やはり「結論」に書いたとおり
@media(max-width:500px){}でＯＫということになる。
max-widthとmax-device-width
max-widthはブラウザの幅。max-device-widthはデバイス自体の幅。
なので、@media (max-device-width:1000px)と指定した場合
デバイス自体の画面幅が1001px以上ならブラウザの幅を手動で小さくしても効かない。
@media only
古いcss等だと@media only screen and ～ といった感じで only が付く場合がある。
これは詳しくは割愛するが
古い時代に使っていたものなので、現在では必要なし。
ただしあっても邪魔にはならない。
改めて結論
@media(max-width:500px){}でOK
↧