CSSのメディアクエリ【現役エンジニアが解説】
今回は、CSSのメディアクエリについて、link要素とスタイルシートでの指定方法に分け、簡単に解説していきます。
link要素で指定
端末のサイズによって、読み込むCSSファイルを指定できます。
端末の条件で、読み込むファイルを1つもしくは複数にすることも可能です。
<link rel="stylesheet" href="hoge_s.css" media="screen and (max-width:479px)"> <link rel="stylesheet" href="hoge_m.css" media="screen and (min-width:480px) and (max-width:767px)"> <link rel="stylesheet" href="hoge_l.css" media="screen and (min-width:768px)">
上記のコードでは、端末サイズが479ピクセル以下、480ピクセルから767ピクセル、768ピクセル以上で読み込むファイルを分けています。
スタイルシートで指定
端末のサイズによって、読み込むスタイルを指定することもできます。
全てのサイズを列挙する場合と、デフォルトのスタイルをベースとする場合の2通りの方法があります。
@media screen and (max-width:479px) { /* スマホ向け */ } @media screen and (min-width:480px) and (max-width:767px) { /* タブレットやスマホ向け */ } @media screen and (min-width:768px) { /* PCやタブレット向け */ }
上記のコードでは、端末サイズが479ピクセル以下、480ピクセルから767ピクセル、768ピクセル以上で全てのサイズを列挙してスタイルを分けています。
デバイスの向きの判定方法
端末のサイズだけでなく、端末の向きによっても、スタイルを分けられます。
min-widthやmax-widthの代わりに、orientationを使い、portraitで縦向き、landscapeで横向きを指定可能です。
@media screen and (orientation:portrait){ /* 縦向き */ } @media screen and (orientation:landscape){ /* 横向き */ }
上記のコードでは、メディアクエリでデバイスの向きを判別し、縦向き(portrait)の場合と横向き(landscape)の場合とで適用するスタイルを分けています。