0

メディアクエリがどのように反応するか知りたいです。

たとえば、ベーシック メディア用のサイズの画像と、モバイル デバイス用のサイズの1400px別の画像を配置しました。500px450px200px

メディアクエリを使用して同じ html ページで呼び出しています。ユーザーがモバイルデバイスで開いたときに小さな画像を表示したい。

同じ画像に対して 2 つの CSS を呼び出した場合 (つまり、メディアごとに CSS を使用して背景を変更した場合)、大きな画像がモバイル デバイスに読み込まれますか? それとも、大きな画像を無視して小さな画像をロードするだけですか? モバイル CSS の前にメイン CSS を配置しました。大きな画像が読み込まれたに違いないと思います。その場合、モバイル デバイスでのサイトの動作が遅くなります。

あなたの見解は？

4

1 に答える 1

1

いいえ、全体像を除外するメディアクエリに挿入する限り、全体像はモバイルデバイスに表示されません。ただし、CSSを次のように整理すると、ダウンロードされます。

/* FIRST DECLARATION:
    BROWSER STARTS DOWNLOADING THE IMAGE */
.my-img-class{
    background:url(my-large-image.jpg);
}

/* SECOND DECLARATION:
    THE RULE ABOVE IS OVERWRITTEN, SO THIS IMAGE WILL BE DOWNLOADED TOO */
@media only screen and (max-width: 600px) {
    .my-img-class{
        background:url(my-small-image.jpg);
    }
}

モバイルデバイスが大きな画像をダウンロードし続けるのを防ぐには、両方のルールをメディアクエリにラップする必要があります。

これが例です。

@media only screen and (max-width: 600px) {
    .my-img-class{
        background:url(my-small-image.jpg);
    }
}

上記のコードは、画面が600px未満のデバイスでのみ解釈されます。

@media screen and (min-width: 601px) {
    .my-img-class{
        background:url(my-large-image.jpg);
    }
}

上記のコードは、600pxを超える画面を持つデバイスによってのみ解釈されます。

さまざまなアプローチを使用して、両方のイメージのダウンロードを防ぐことができます。

多くはあなたのサイトのターゲットに依存します。モバイルバージョンが最も広く使用されている場合は、計画を開始してから、メディアクエリを使用して、デスクトップバージョンのコンテンツを徐々に追加する必要があります。

ここにあなたが役に立つと思ういくつかのリソースがあります：

于 2012-10-06T10:15:51.123 に答える