CSS で「@media screen and (max-width: 1024px)」はどのように機能しますか?

CSS の「@media screen and (max-width: 1024px)」ルールを理解する

提供されたコードフラグメントは CSS メディアです特定の画面解像度またはデバイス サイズをターゲットにしていると思われるクエリ。その目的を理解するためにコンポーネントを分解してみましょう:

@media screen: メディア クエリのこの部分は、デバイスが自身を「スクリーン」カテゴリー。これは通常、デスクトップ ブラウザと特定のスマートフォンに適用されます。

and (max-width: 1024px): メディア クエリの 2 番目の部分では、スクロールバーを含むブラウザ ウィンドウの最大幅をチェックします。 。 CSS ルールの適用は、幅が 1024 ピクセル以下のデバイスまたはブラウザ ウィンドウに制限されます。

組み合わせ: これら 2 つのコンポーネントを組み合わせると、メディア クエリ「@media」になります。 screen and (max-width: 1024px)」は、その中の特定の CSS ルールが、最大幅 1024 の「screen」デバイスとみなされるデバイスにのみ適用されることを意味します。ピクセル。

実際の応用:

画面の幅が 1024 ピクセル未満の場合、継承した CSS コードはクラス「bg」の画像をターゲットにしているようです。この状況では、マージン調整が適用されて、画像が画面の水平方向の中央に配置されます。

デバイスの互換性:

古いブラウザではサポートされていない可能性があることに注意してください。メディアクエリ内の「max-width」プロパティ。さらに、一部のデスクトップ ブラウザでは幅が 1024 ピクセルを超えるように設定されている場合があるため、その場合には CSS ルールは適用されません。

結論:

理解することで「@media screen and (max-width: 1024px)」という表記を使用すると、CSS コードで特定のデバイス サイズや画面解像度を効果的にターゲットにし、外観や画面解像度をカスタマイズできます。これらの基準に基づいてウェブサイトの機能を評価します。

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