CSS 媒体查询 - 实例
- 前のページ CSS メディアクエリ
- 次のページ RWD 簡介
CSS 媒体查询 - 更多实例
让我们看看使用媒体查询的更多例子。
媒体查询是一种流行的技术,用于将定制的样式表传递给不同的设备。
下面演示一个简单的例子,让我们来更改不同设备的背景色:

例
/* 将 body 的背景色设置为棕褐色 */ body { background-color: tan; } /* 在小于或等于 992 像素的屏幕上,将背景色设置为蓝色 */ @media screen and (max-width: 992px) { body { background-color: blue; } } /* 在 600 像素或更小的屏幕上,将背景色设置为橄榄色 */ @media screen and (max-width: 600px) { body { background-color: olive; } }
您想知道我们为什么要精确使用 992px 和 600px 吗?它们就是我们所称的设备的“典型断点”(typical breakpoints)。您可以在我们的 レスポンシブ Web デザインのチュートリアル 中学习有关典型断点的更多知识。
メニューのメディアクエリ
この例では、メディアクエリを使用して、異なるスクリーンサイズに応じて異なるレスポンシブナビゲーションメニューを作成します。
例
/* ナビバーのコンテナ */ .topnav { overflow: hidden; background-color: #333; } /* ナビバーのリンク */ .topnav a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* 幅が600ピクセル以下のスクリーンで、メニューのリンクが並ぶ代わりに重なり合います */ @media screen and (max-width: 600px) { .topnav a { float: none; width: 100%; } }
列のメディアクエリ
メディアクエリの一般的な使用法は、リジッドなレイアウトを作成することです。この例では、4列、2列、全幅列の間で変化するレイアウトを作成しました。これは、異なるスクリーンサイズに応じてです:
大型スクリーン:
中型スクリーン:
小型スクリーン:
例
/* 相互に隣接して浮動する4つの等しい列を作成します */ .column { float: left; width: 25%; } /* 992px以下のスクリーンで、4列から2列に変更します */ @media screen and (max-width: 992px) { .column { width: 50%; } } /* 幅が600ピクセル以下のスクリーンで、列が並ぶ代わりに重なり合います */ @media screen and (max-width: 600px) { .column { width: 100%; } }
ヒント:より現代的な列レイアウトの作成方法はCSS Flexboxを使用します(以下の例を参照してください)。ただし、Internet Explorer 10およびそれ以前のバージョンではサポートされていません。IE6-10のサポートが必要な場合は、フロートを使用してください(上記の例の通り)。
フレックスボックスレイアウトモジュールに関するさらに多くの知識を学ぶには、 CSS Flexbox この章を学習してください。
レスポンシブWebデザインに関するさらに多くの知識を学ぶには、私たちの レスポンシブ Web デザインのチュートリアル。
例
/* フレックスボックスのコンテナ */ .row { display: flex; flex-wrap: wrap; } /* 4つの等しい列を作成します */ .column { flex: 25%; padding: 20px; } /* 992px以下のスクリーンで、4列から2列に変更します */ @media screen and (max-width: 992px) { .column { flex: 50%; } } /* 幅が600ピクセル以下のスクリーンで、列が並ぶ代わりに重なり合います */ @media screen and (max-width: 600px) { .row { flex-direction: column; } }
メディアクエリで要素を非表示にする
メディアクエリのもう一つの一般的な使用法は、異なるスクリーンサイズで要素を非表示にすることです:
小さなスクリーン上では隠します。
例
/* スクリーンサイズが 600ピクセルまたはそれ以下の場合、この要素を非表示にします */ @media screen and (max-width: 600px) { div.example { display: none; } }
メディアクエリでフォントサイズを変更
また、メディアクエリを使用して、異なるスクリーンサイズに対する要素のフォントサイズを変更できます:
可変なフォントサイズ。
例
/* スクリーンサイズが 600ピクセル以上の場合、<div> のフォントサイズを 80ピクセルに設定します */ @media screen and (min-width: 600px) { div.example { font-size: 80px; } } /* スクリーンサイズが 600px またはそれ以下の場合、<div> のフォントサイズを 30px に設定します */ @media screen and (max-width: 600px) { div.example { font-size: 30px; } }
方向:ポートレート / ランドスケープ
メディアクエリは、ブラウザの方向に応じてページのレイアウトを変更するために使用できます。
ブラウザの幅が高さを超える場合にのみ適用されるCSS属性のセットを設定できます、これは横画面と呼ばれます:
例
横向モードにいる場合、浅い青い背景色を使用します:
@media only screen and (orientation: landscape) { body { background-color: lightblue; } }
最小幅から最大幅
また、min-width と max-width 属性を使用して最小幅と最大幅を設定できます。
例えば、ブラウザの幅が 600 から 900 ピクセルの間にある場合、<div> 要素の外観を変更します:
例
@media screen and (max-width: 900px) and (min-width: 600px) { div.example { font-size: 50px; padding: 50px; border: 8px solid black; background: yellow; } }
使用追加値:以下の例では、追加のメディアクエリを既存のメディアクエリにカンマ(OR演算子に似た)で追加しています:
例
/* 当宽度在 600 像素到 900 像素之间或大于 1100 像素时 - 更改 <div> 的外观 */ @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) { div.example { font-size: 50px; padding: 50px; border: 8px solid black; background: yellow; } }
CSS @media リファレンスマニュアル
すべてのメディアタイプおよび特性/表現の完全な概要については、以下を参照してください CSS リファレンスの @media ルール。
ヒント:レスポンシブ Web デザイン(異なるデバイスやスクリーンに対応する方法)に関する知識をさらに学び、メディアクエリのブレイクポイントを使用する方法については、以下の レスポンシブ Web デザインのチュートリアル。
- 前のページ CSS メディアクエリ
- 次のページ RWD 簡介