CSS メディア クエリは、画面サイズに基づいて Web サイトのレイアウトをどのように応答的に調整しますか?

CSS におけるメディア クエリの役割を理解する

CSS の領域では、次のようなコード スニペットに遭遇する可能性があります。

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

この不可解な行はメディア クエリを表しています。メディア クエリは、以下に基づいてスタイルを選択的に適用する強力な CSS 機能です。特定の基準。

メディア クエリの解読

メディア クエリは 2 つのコンポーネントで構成されます:

• メディア タイプ: screen は、スタイルが画面ベースのレイアウトに適用されることを示します。プリンタ。
• メディア機能: (最大幅: 1024px) は、ブラウザ ウィンドウの幅が 1024 ピクセル以下であるかどうかを確認するテストを表します。

条件付きスタイルの適用

CSS コードメディア クエリ内のクエリは、ブラウザがメディア機能で指定された基準を満たしている場合にのみ有効になります。この場合、img.bg のスタイルは、ブラウザ ウィンドウの幅が最大 1024 ピクセルの場合にのみ適用されます。

メディア クエリの目的

このメディアクエリは、スタイルの適用を最大幅 1024 ピクセルのデバイスおよびブラウザ ウィンドウに制限します。これは通常、モバイル デバイスや小さな画面向けに Web サイト要素のレイアウトを応答的に調整するために使用されます。

img.bg の left プロパティと margin-left プロパティは、狭い画面上で画像を異なる位置に配置し、最適化することを目的としている可能性があります。

追加リソース

メディア クエリの複雑さについては、W3C メディア クエリ仕様を参照してください:

• https://www.w3.org/TR/css3-mediaqueries/

以上がCSS メディア クエリは、画面サイズに基づいて Web サイトのレイアウトをどのように応答的に調整しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。