/
レスポンシブで無くてはならないメディアクエリ( @media )。
min-width や max-width はよく使われますが、他にも様々な種類があります。
使い方によっては、よりシンプルで読み込みやすいcssを組めるかも??
メディア種別 (media type)
メディア種別は、 css がどのメディア (全て、印刷、画面) のためかをブラウザーに伝えます。
| メディア種別 | 説明 |
|---|---|
all (初期値) | 全てのメディア |
| 印刷 | |
| screen | 画面 (PC、スマホ、iPadなど) |
メディア特性 (media feature)
| プロパティ : 値 | 説明 |
|---|---|
max-width: 〇〇px | 画面幅の最大値 (指定値以下) |
mix-width: 〇〇px | 画面幅の最小値 (指定値以上) |
man-height: 〇〇px | 画面高さの最小値 (指定値以下) |
min-height: 〇〇px | 画面高さの最小値 (指定値以上) |
orientation: portrait | デバイスの向き → 縦 / max-widthと併記推奨 |
orientation: landscape | デバイスの向き → 横 / max-widthと併記推奨 |
hover: hover | ホバー可能 ( pcなど ) |
hover: none | ホバー出来ない ( タッチデバイス ) |
-webkit-min-device-pixel-ratio: 2 | Renta判定 / 2 = 2x以上 ベンダーにより対応が異なる為、 併記必須 @media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx){ css } |
aspect-ratio: 横px / 縦px | 機種ごとの設定が必要 + 縦向き,横向きでそれぞれ設定が必要。 特定の機種に対応させたい場合以外は使いづらい / max-width, orientation と併記推奨 |
メディアクエリ論理演算子
メディアクエリは 基本的に @media メディア種別 and (メディア特性 = プロパティ: 値) { css } のように記述しますが
演算子には and, not, only, ,(カンマ = or) があり、組み合わせによって複雑なメディアクエリを構成することができます。
| 演算子 | 効果 | 説明 |
|---|---|---|
and | 結合 | 全ての条件がtrueの場合に、{ css } を適用 |
not | 否定 | not 以降がfalseの場合に、{ css } を適用 / メディア種別の指定必須@media 直後 又は メディア種別の直前 のみ記載可 |
only | 旧ブラウザ用 | クエリ全体が一致する場合にのみ、{ css } を適用 / メディア種別の指定必須 現在のブラウザでは、ほぼ設定の必要はない |
, (カンマ) | or | いづれかの条件がtrueの場合に、{ css } を適用 |
メディアクエリ記述例
メディア種別のみ
CSS code
@media print {
body { font-size: 12pt; }
}
@media screen {
body { font-size: 1.8rem; }
}
@media screen, print {
body { font-size: 18px; }
}and – 全ての条件に一致
CSS code
/* 画面幅 320px以上かつ768px以下、かつ縦向きの場合 */
@media screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait)
body { font-size: 1.6rem; }
}not – メディア種別の否定
CSS code
/* 印刷ではない場合 */
@media not print {
body { font-size: 1.8rem; }
}not – 同じ設定の否定( 以上 vs 未満 )
レスポンシブでは、pc用(min-width:768px), sp用(max-width:767px) のようにpc用, sp用で数値を変えて設定する場合が多いですが、not を利用すると「設定の否定」となり、 ブレークポイントの数値を変えずに「〇〇以上」「〇〇以外 (未満)」を設定できるようになります。
CSS code
/* PC = 画面幅768px以上 */
@media screen and (min-width: 768px) {
body { font-size: 1.8rem; }
}
/* SP = 画面幅768px未満 = 768px以上ではない */
@media not screen and (min-width: 768px) {
body { font-size: 1.6rem; }
}, – いづれかの条件に一致
CSS code
/* 画面幅1260px以上、又は、画面高さ1040px以上 */
@media screen and (min-width: 1260px), (min-height: 1040px) {
body { font-size: 1.8rem; }
}