【CSS】意外と知らないメディアクエリの種類

レスポンシブをするときに皆さんはどのように記述をしていますか？
cssファイルに
@media screen and (max-width: 1024px) {～}
と書く人が多いと思いますが、メディアクエリの書き方や属性に種類があることはご存知でしょうか。

今回は今まであまり深く考えたことがなかったメディアクエリについて深堀りしていきたいと思います。

基本的なメディアクエリの書き方

cssに記述する

冒頭でも例に出しましたがおそらくこの方法が一番多く使われると思います。
css内にブレイクポイントを全て記述します。

p{
 font-size:40px;
}

@media screen and (max-width: 1024px) {
 p{
  font-size:30px;
 }
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
 p{
  font-size:25px;
 }
}

@media screen and (max-width: 768px) {
 p{
  font-size:20px;
 }
}

@media screen and (max-width: 420px) {
 p{
  font-size:10px;
 }
}

このように指定したいブレイクポイントごとに記述し、{　}のなかに内容を書いていきます。

@media screen and (max-width: 1024px) and (min-width: 769px) {　}のように2つ指定することもできます。
この場合は画面幅が最小769px～最大1024pxで効きます。

ちなみに、max-width=最大値なのでこの場合は1024px以下に適用され、min-width＝最小値なので769px以上と考えます。

cssに別のcssを@iｍportで読み込む

通常の記述用のcssとレスポンシブ用のcssを用意し、@importタグで読み込みます。

@import url('sp.css') screen and (max-width: 420px);

弊社ではブレイクポイントごとにcssファイルを分けているわけではないのでこの方法は使いません。

linkで読み込む

こちらはあまり見かけませんが、htmlのheadタグ内にlink形式でcssを読み込む際に一緒にブレイクポイントも指定します。

<link rel="stylesheet" href="css/sp.css" media="screen and (max-width: 420px)">

上記の記述でsp.cssという名前のcssファイルを420px以下で読み込むことができます。

@import形式と同じようにレスポンシブ用のcssをわけてないのでこの方法は使いません。

メディアタイプについて

@media screenの「screen」部分をメディアタイプといいます。

基本的にはscreenを使いますが他にどんな種類があるかご紹介します。

screenとprint以外は見かけたことが無かったので思っていた以上にたくさんの種類がありました。

ちなみに、最新のcssのバージョン（レベル）では以下のタイプは非推奨のようです。

非推奨タイプ

• tty
• tv
• projection
• handheld
• braille
• embossed
• speech

…実質はscreenとprintが使えれば大丈夫そうですね。
むしろ@media (max-width:●●）だけで十分かもしれません。

メディア特性について

続いては、@media screen and (max-width: 1024px)の「max-width」部分の種類をご紹介します。

@media screen and (orientation:landscape){ }
@media screen and(aspect-ratio:4/3){ }

このように使うみたいです。
他にも色々ありますがメインで使うのはwidthとheightになると思います。

まとめ

改めてメディアクエリについて調べてみると沢山の指定方法がありました。
ですが結局のところ必要な記述は限られていて、むしろもっと短く書いても問題ないということがわかりました。