CSSを書いていると、ページを表示するデバイスによって、ページの見え方を変える必要がでてきます。
デバイスに応じたスタイルのCSSを書くために必要な処理を＠mediaのあとに書きます。
メディアの種別を対象にして記述
サイトは一般的にデバイスのモニター画面を想定してデザインされていますが、プリンターや特殊機器を対象としたスタイルを記述したいときは下記のように記述します。
@media print {
//ここにスタイルを記述
}モニター画面とプリンター両方に対するスタイルを記述する場合はこうなります。
@media screen, print {
//ここにスタイルを記述
}print は印刷、screenはモニター画面、speechは音声機器、allは全ての意味になります。
メディアの特性を対象にして記述
出力端末・ユーザーエージェントなど特定のものを対象にしてスタイルを適用することもできます。
特定のビューポートに対して適用したいときにはこうなります。
@media (max-width: 1399px) {
//ビューの幅が 1399px以下であれば適用するスタイル
}
@media (min-width: 1400px) {
//ビューの幅が 1400px以上であれば適用するスタイル
}組み合わせ出来る
and をつけて色んな特性を組み合わせることができます。
@media (min-width: 350px) and (max-width: 767px) {
//ビューの幅が 350px以上で767px以下の場合のスタイル
}
@media screen and (min-width: 320px) and (orientation: portrait) {
//ビューの幅が 350px以上で 横長のビューの場合のスタイル（スマホなら縦向き）
}
@media screen and (min-width: 320px) and (orientation: landscape) {
//ビューの幅が 350px以上で 横長のビューの場合のスタイル（スマホなら横向き）
}否定もできる
not を使うことで否定した特性でスタイルを適用することができます。
@media (not(hover)) {
//端末でhoverができない場合にこのスタイルを使う
}複合のクエリを簡潔に書けるようになった
Media Queries Level 4 で新しい構文の記述が導入されました。 記号が使えます。
@media (320px <= width <= 767px) {
main {
width: 100vh;
}
}