CSSメディアの使い方を詳しく解説

Web サイト開発において CSS の重要性は自明のことです。 CSS を使用して Web サイトのスタイル、レイアウト、フォントなどのさまざまな外観属性を設定し、Web サイトをより魅力的で読みやすいものにすることができます。ただし、デバイス (デスクトップ コンピュータ、タブレット、携帯電話など) によって画面サイズや解像度が異なるため、デバイスごとに CSS スタイルを設定しないと、Web サイトの表示効果が満足のいくものにならない可能性があります。

この問題を解決する 1 つの方法は、デバイスごとに異なる CSS スタイルを作成できる CSS メディア クエリ機能です。この記事では、CSS メディア クエリの基本概念、構文、応用例を詳しく紹介し、この実用的なテクノロジを使い始めることができるようにします。

CSS メディア クエリとは

CSS メディア クエリは、さまざまな画面サイズやデバイス タイプに適用されるさまざまな CSS スタイルを指定するために使用される、スタイル シートに埋め込まれた条件ステートメントです。 CSS メディア クエリを通じて、Web サイトがさまざまなデバイスで最高のユーザー エクスペリエンスを提供できるように、応答性の高い Web サイト デザイン (レスポンシブ Web デザイン) を実装できます。

CSS メディア クエリ パーツは、メディア タイプとメディア プロパティで構成されます。形式は次のとおりです:

@media mediatype and|not|only (media feature) {
   CSS rules;
}

mediatype は、CSS スタイルが適用されるメディア タイプを指定します。メディア機能は、デバイスの幅、デバイスの高さ、方向など、CSS スタイルを適用するメディア プロパティを指定します。

メディア タイプ

メディア タイプは、ドキュメントのレンダリングに使用されるデバイスのタイプを指します。一般的なメディア タイプは次のとおりです。

• all: すべてのデバイスで動作します。
• print: プリンターや印刷プレビューなどの出力デバイスに適しています。
• 画面: コンピュータ画面、タブレット、スマートフォン、その他の画面デバイスに適しています。
• ハンドヘルド: 画面の小さなハンドヘルド デバイス (スマートフォンなど) に適しています。
• 音声: スクリーン リーダーなどのサウンド デバイスに適しています。

メディア プロパティ

メディア プロパティには次のものが含まれますが、これらに限定されません:

• width: ビューポートの幅、単位 px。
• 高さ: ビューポートの高さ、単位ピクセル。
• device-width: デバイスの幅。
• device-height: デバイスの高さ。
• 方向: デバイスの方向、ランドスケープ (水平) またはポートレート (垂直)。
• アスペクト比: ビューポートの幅と高さの比率。
• color: デバイスの色のビット深度。
• resolution: デバイスの解像度、単位 dpi。

上記の 2 つの組み合わせにより、さまざまなデバイス タイプや画面属性に応じてさまざまな CSS スタイルを定義できます。

CSS メディア クエリの使用例

次に、さまざまなデバイスや画面特性に合わせてカスタマイズされたスタイルを含む、具体的な CSS メディア クエリの使用例をいくつか示します。

1. デバイスの種類ごとに異なるスタイルを設定する

/* 设备为电脑屏幕 */
@media screen and (min-width: 768px) {
   body {
      background-color: #333333;
   }
}

/* 设备为智能手机屏幕 */
@media handheld and (max-width: 599px) {
   body {
      background-color: #ffffff;
   }
}

上記の 2 つの CSS コードは、コンピューター画面とスマートフォン画面にそれぞれ異なる背景色を適用します。

2. デバイスの方向に応じて異なるスタイルを設定する

/* 设备为横向 */
@media screen and (orientation: landscape) {
   body {
      background-color: #f3f3f3;
   }
}

/* 设备为竖向 */
@media screen and (orientation: portrait) {
   body {
      background-color: #ffffff;
   }
}

上記の 2 つの CSS コードは、デバイスの方向 (水平または垂直) に応じて異なる背景色を設定します。

3. ビューポートの幅に基づいて異なるスタイルを設定する

/* 视口宽度大于等于 960px */
@media screen and (min-width: 960px) {
   body {
      font-size: 16px;
   }
}

/* 视口宽度小于 960px */
@media screen and (max-width: 959px) {
   body {
      font-size: 14px;
   }
}

上の 2 つの CSS コードは、ビューポートの幅に基づいて異なるフォント サイズを適用します。

4. 複数の条件を組み合わせる

もちろん実際の使用では、状況に応じて複数の条件を組み合わせる必要があります。たとえば、スマートフォンに適したロゴ画像を設定したいのですが、デバイスのビューポート幅が 800px 以下の場合にのみ有効になります。現時点では、次のコードを使用できます。

@media handheld and (max-device-width: 800px), 
(-webkit-min-device-pixel-ratio: 1.5) {
   #logo {
      content:url('logo-for-smartphone.png');
   }
}

この CSS コードでは、handheld と (max-device-width: 800px) および (-webkit- min-device-pixel-ratio: 1.5)2 つの条件。前者は、デバイスがハンドヘルド デバイスであり、デバイスのビューポート幅が 800 ピクセル未満であることを指定します。後者は WebKit レンダリング エンジンと互換性があり、1.5 を超えるデバイス ピクセル比を指定します。

概要

CSS メディア クエリ機能は、レスポンシブ Web サイト デザインの重要な部分であり、さまざまなデバイス タイプや画面特性に応じてさまざまな CSS スタイルを作成するのに役立ちます。この記事の導入を通じて、CSS メディア クエリの基本的な概念、構文、および適用方法を理解し、それらを使用して Web サイトのデザインにさらに洗練されたパーソナライズされたスタイルを提供できるようになったはずです。

以上がCSSメディアの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。