[解決済み】CSSの@media screenと(max-width: 1024px)はどういう意味ですか？

2022-04-02 01:51:43

質問

継承したCSSファイルにこのようなコードがあったのですが、意味がわかりません。

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

具体的には、1行目で何が起こっているのでしょうか？

それはメディアクエリです。ブラウザがテストをパスしない限り、中のCSSが実行されないようにするものです。

このメディアクエリに含まれるテストは

@media screen - ブラウザは、自分自身を「スクリーン」カテゴリーに属すると認識しています。これは、ブラウザが自分自身をデスクトップクラスとみなしていることをおおよそ意味します。古い携帯電話用ブラウザ（ただし、iPhoneなどのスマートフォン用ブラウザ。するまたはスクリーンリーダーで、ページを印刷するのではなく、画面上に表示すること。
max-width: 1024px - ブラウザのウィンドウ幅（スクロールバーを含む）が1024ピクセル以下であること。( CSSピクセル、デバイスピクセルではありません .)

この2つ目のテストから、これはCSSをiPadやiPhoneなどのデバイスに限定するためのものであることがわかります（古いブラウザでは max-width また、多くのデスクトップ用ブラウザは1024ピクセルより広い幅で動作しています）。

ただし、幅1024ピクセル未満のデスクトップ・ブラウザー・ウィンドウにも適用されます。 max-width メディアクエリ

Media Queriesの仕様書です。かなり読みやすいです。