CSS で「@media screen and (max-width: 1024px)」は何をしますか?

CSS の @media 画面と (最大幅: 1024px) を理解する

馴染みのない CSS コードに遭遇すると、困惑することがあります。最近の例では、開発者は次のような謎めいた行を含むコードを継承しました:

@media screen and (max-width: 1024px) {
    img.bg {
        left: 50%;
        margin-left: -512px;
    }
}

この謎めいた行を解読するには、メディア クエリの重要性を詳しく調べてみましょう。

メディア クエリ:コード内に示されているものは、特定の基準に基づいて条件付きでスタイル ルールを適用するために使用されます。この場合、テストされる基準は次のとおりです:

1. @media screen: これにより、CSS ルールはデスクトップクラスのブラウザとして識別されたデバイスにのみ適用されます。

2. (max-width: 1024px): この条件は、CSS ルールの適用をブラウザ ウィンドウの幅 (スクロールバーを含む) が 1024 ピクセル以下のデバイスに制限します。

これらの基準に基づいて、CSS は中括弧で囲まれたルールは、両方の条件を満たすデバイスにのみ適用されます。これは主に、スタイルを iPad などのデバイスに制限することを目的としています。 iPhone。

ただし、幅が 1024 ピクセル未満のデスクトップ ブラウザ ウィンドウも、最大幅のメディア クエリをサポートするブラウザの CSS スタイルを継承することに注意することが重要です。

詳細については、詳細については、http://www.w3.org/TR/css3-mediaqueries/

以上がCSS で「@media screen and (max-width: 1024px)」は何をしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。