ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS メディア クエリは、画面サイズに基づいて Web サイトのレイアウトをどのように応答的に調整しますか?

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

Barbara Streisand
リリース: 2024-11-23 22:26:11
オリジナル
455 人が閲覧しました

How Do CSS Media Queries Responsively Adjust Website Layouts Based on Screen Size?

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート