マークアップエンジニアの中村です。
コーダーの方ならレスポンシブ対応の際にメディアクエリを使うことがあると思います。もちろん私も使います。
例えば、
もしipad以下のスマホサイズのデバイスのみに効かせたいなぁ、という時は
@media screen and (max-width:767px){
ここにスマホだけの指定
}
こんな書き方をしているんじゃないでしょうか？
そしてスマホより大きくてPC以下のタブレットだけに効かせたいなぁなんて時は
@media screen and (min-width:768px) and (max-width:1023px){
ここにタブレットだけの指定
}
こんな書き方をしているのではないでしょうか？
私も書いていました。
でも久しぶりにメディアクエリについて勉強してみると、劇的に進化していました。
今はメディアクエリもレベル4らしいです。
レベルがあるのも知りませんでしたが（笑）
参考：Media Queries Level 4
LEVEL4からは最初の指定の場合
@media screen and (width < 767px) {
ここにスマホだけの指定
}
こう書くことが出来るそうです。
次のタブレット指定の場合
@media screen and (768px <= width < 1024px) {
ここにタブレットだけの指定
}
こんなにシンプルにかけるようになっていました。
記号だけなので分かりやすいですし、記述ミスが減りそうですね。
以前の書き方だと、サイズの後にpxを入れ忘れたりcssのクセでpxの後に「;」を入れてしまったりしていましたが、これならスッキリですね。
ちなみに、
メディアタイプが allかつ、 メディア特性の指定がある場合、 allは省略可能です。
@media all and (width < 767px) {
ここにスマホだけの指定
}
⬇︎ ⬇︎ ⬇︎
@media (width < 767px) {
ここにスマホだけの指定
}
これでいける！シンプルですね。
ちなみにallやscreenの定義は以下のようになります。
all 全てのデバイス
print プリンター。印刷プレビューに表示されるドキュメントも対象。
screen "print"と"speech"にマッチしないもの全て。
（一般的に、コンピュータやスマホなどの「スクリーン画面」を持ったデバイス）
speech スピーチシンセサイザ
他にも
（ビューポートの）アスペクト比が16:9の全てのデバイス指定で
@media all and (aspect-ratio: 16/9) {
ここにプロパティ
}
こんな書き方とか、
離れた範囲の複数指定もできます。
横幅が480px以下、または1200px以上
@media (max-width: 480px), (min-width: 1200px){
ここにプロパティ
}
とてもシンプルで綺麗ですね。
メディアクエリもいつの間にか進化していました。
これはこれで慣れるのに少し時間は要しそうですが、
使って行こうと思います。
