CSS 媒体查询 - 实例

CSS 媒体查询 - 更多实例

让我们看看使用媒体查询的更多例子。

媒体查询是一种流行的技术,用于将定制的样式表传递给不同的设备。

下面演示一个简单的例子,让我们来更改不同设备的背景色:

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;
  }
}

実際に試してみる

柔軟な画像ライブラリ

この例では、メディアクエリと flexbox を一緒に使用して、レスポンシブな画像ライブラリを作成します:

実際に試してみる

柔軟なウェブサイト

この例では、メディアクエリと flexbox を一緒に使用して、柔軟なナビゲーションバーと柔軟なコンテンツを持つレスポンシブウェブサイトを作成します。

実際に試してみる

方向:ポートレート / ランドスケープ

メディアクエリは、ブラウザの方向に応じてページのレイアウトを変更するために使用できます。

ブラウザの幅が高さを超える場合にのみ適用される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 デザインのチュートリアル