CSSメディアの使い方を詳しく解説-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-21 17:05:17

オリジナル

1741 人が閲覧しました

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 サイトの他の関連記事を参照してください。