ホーム>Web デザインのチュートリアル>CSS チュートリアル

CSS3 の @media クエリ FAQ

著者：Eve Cole 更新時間：2024-12-24 13:16:37

CSS3 の @media クエリは、さまざまなメディア タイプやデバイスの特性に基づいてさまざまなスタイル ルールを適用できる強力な機能です。これにより、Web サイトやアプリがさまざまなデバイスや画面サイズで優れたユーザー エクスペリエンスを提供できるレスポンシブ デザインを作成できるようになります。この記事では、@media クエリの定義、構文、使用シナリオ、および一般的な問題について詳しく説明します。

1.@mediaクエリの定義

CSS3 の @media ルールを使用すると、メディア タイプとメディア プロパティに基づいてさまざまなスタイル ルールを適用できます。 screen (画面)、 print (印刷) などのメディア タイプ (メディア タイプ) と、 width 、 height 、 orientationなどのメディア機能 (メディア機能) は、デバイスの特定の特性を記述するために使用されます。

2. @media クエリの基本構文

@media クエリの基本的な構文は次のとおりです。

 @media メディアタイプおよび|のみ| (メディア機能) {
    /* CSS ルール */
}
mediatype : screen 、 printなどのメディア タイプを指定します。省略した場合、デフォルトですべてのメディアタイプが使用されます。 media feature : min-width 、 max-width 、 orientationなど、メディアの特徴と値の条件を定義します。

3. 論理演算子

@media クエリでは、次の論理演算子を使用してメディア条件を組み合わせることができます。

および: すべての条件が満たされる必要があることを示します。 not : 条件が満たされない場合にスタイルが適用されることを示します。 Only : メディア クエリをサポートしていない古いブラウザがスタイルを適用できないようにするために使用されます。カンマ: 複数の条件のいずれかが満たされた場合にスタイルが適用されることを示します。

4. 利用シーン

1. 画面サイズに応じてスタイルを設定する

@media screen and (min-width: 600px) {
    体 {
        背景色: ライトブルー;
    }
}

画面幅が600ピクセル以上の場合、ページの背景色が水色に変わります。

2. レスポンシブデザイン

@media 画面と (最大幅: 800px) {
    。容器 {
        幅: 100%;
    }
}
@media 画面と (min-width: 801px) {
    。容器 {
        幅: 750ピクセル;
    }
}

レスポンシブデザインの画面幅に基づいてコンテナーの幅を変更します。

3. 印刷スタイル

@メディアプリント{
    体 {
        フォントサイズ: 12pt;
        色: 黒;
        背景: 白;
    }
}

フォント サイズ、色、背景など、印刷用の特定のスタイルを設定します。

4. 横画面と縦画面

@media 画面と (方向: 横) {
    #サイドバー {
        表示: なし。
    }
}

デバイスが横向きモードの場合は、サイドバーを非表示にします。

5. 一般的なメディアの特性

CSS3 はさまざまなメディア機能を提供します。一般的に使用される機能をいくつか示します。

width 、 min-width 、 max-width : 出力デバイスのページの表示領域の幅を定義します。 height 、 min-height 、 max-height : 出力デバイスのページの表示領域の高さを定義します。方向: portrait (垂直画面) やlandscape (水平画面) など、デバイスの方向を定義します。解像度: デバイスの解像度を定義します。 color 、 color-index : カラー機能とカラー インデックスを定義します。

6. 注意事項

メディア条件のソート: min-widthとmax-width判定条件として使用する場合、スタイル カバレッジの問題を避けるために、条件範囲が小さいものから大きいもの、または大きいものから小さいものにソートされていることを確認する必要があります。スタイルの競合: @media クエリ内のスタイルが後続の CSS ルールによってオーバーライドされないようにします。 @media クエリスタイルを最後に記述することをお勧めします。メタ タグ: <meta name="viewport" content="width=device-width, initial-scale=1.0">を設定して、モバイル デバイスがページを正しくレンダリングできるようにします。構文エラー: @media クエリの構文、特に論理演算子の後のスペースが正しいことを確認し、括弧内に終端文字「;」を記述しないでください。

7. まとめ

CSS3 の @media クエリはレスポンシブ デザインを作成するための重要なツールであり、さまざまなメディア タイプやメディア プロパティに基づいてさまざまなスタイル ルールを適用できます。 @media クエリを活用することで、Web サイトやアプリがさまざまなデバイスや画面サイズで優れたユーザー エクスペリエンスを提供できるようになります。この記事が @media クエリの理解と使用に役立つことを願っています。

CSS3 の @media クエリに関するこの記事はこれで終わりです。さらに関連する CSS3 @media クエリの内容については、downcodes.com で以前の記事を検索するか、今後もダウンコードをさらにサポートしていただければ幸いです。

関連記事