メディア クエリ CSS コードの使用方法を調べる

メディア クエリは CSS3 の重要な機能であり、開発者がさまざまなデバイス画面にさまざまなページ レイアウトやスタイルを表示できるようにします。メディア クエリでは、さまざまな画面のニーズを満たすために、さまざまなデバイスに応じてさまざまな CSS プロパティを設定できます。将来の Web デザインと開発では、メディア クエリがますます重要になるでしょう。この記事では、メディア クエリ CSS コードの使用方法について説明します。

メディア クエリの構文は次のとおりです。

@media (media feature) {
    /*CSS styles*/
}

@media はブラウザにこれがメディア クエリであることを伝え、メディア機能はメディア クエリによって認識される特定の条件を表します。 CSS スタイルは、この条件のアプリケーションを表します。CSS スタイル。

これはメディア クエリの例です:

@media (max-width: 600px) {
    body {
        background-color: red;
    }
}

したがって、上記のコードは、デバイスの幅が 600 ピクセル以下の場合、赤色の背景色を使用することを示しています。

メディア クエリでは、多くのメディア機能を使用できます。一般的に使用されるいくつかのメディア機能を次に示します:

• width: ターミナルの幅を指定します。
• height: 端子の高さを指定します。
• device-width: 端末画面の幅を指定します。
• device-height: 端末画面の高さを指定します。
• orientation: デバイスの向きが横向きか縦向きかを指定します。
• aspect-ratio: 端末画面のアスペクト比を指定します。
• resolution: 端末画面の解像度などを指定します。

メディア クエリは、単一の条件の判断をサポートするだけでなく、複数の条件の判断も可能にします。例:

@media (max-width: 480px) and (orientation: portrait) {
    body {
        background-color: yellow;
    }
}

上記のコードは、デバイスが 480px 以下で、デバイスの向きが縦の場合、背景色として黄色を使用します。

クエリではなくメディア クエリもあります。 not クエリは、特定の条件を除いて、他のすべての条件が満たされていることを示します。例:

@media not (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

上記のコードは、デバイスの幅が 768 ピクセル未満の場合、フォント サイズは 16 ピクセルであることを意味します。

実際の開発では、カンマを使用してさまざまなメディア クエリを結合することもできるため、さまざまなデバイスにさまざまな CSS プロパティを設定できます。例:

@media (min-width: 768px), handheld and (orientation: landscape) {
    body {
        font-size: 20px;
    }
}

上記のコードは、デバイスの幅が 768 ピクセル以上である場合、またはハンドヘルド デバイスが横向きモードで使用されている場合、フォント サイズは 20 ピクセルであることを意味します。

要約すると、メディア クエリは CSS3 の重要な機能の 1 つであり、デバイス画面の特性に応じてさまざまなデバイスに CSS プロパティを設定することで、さまざまなレイアウトやスタイルを実現できます。実際の開発では、さまざまなメディア機能を使用してメディア クエリを組み合わせ、より良い結果を得ることができます。

以上がメディア クエリ CSS コードの使用方法を調べるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。