2

たとえば、Web サイト用に 2 セットの画像があり、1 セットは低解像度で、もう 1 セットは高解像度で、幅 1280 のユーザーのような画面サイズに低解像度を表示し、他は高解像度の画像を表示するにはどうすればよいですか?私がする？JavaScriptを使用していますか？または他の方法？cssまたはhtmlで定義できますか?

4

2 に答える 2

3

そのためにCSS メディア クエリを使用できます。メディア クエリの詳細については、こちらをご覧ください。

例：

/* This block applies to all "screen" devices
*/
@media screen {
    .some-content {
        background-image: url(largeimage.jpg);
    }
}

/* This media query applies only to "screen" devices with
   a maximum width of 1279px (e.g., < 1280)
*/
@media screen and (max-width: 1279px) {
    /* Use `mediumimage.jpg` on these devices instead of the above */
    .some-content {
        background-image: url(mediumimage.jpg);
    }
}

/* This media query applies only to "screen" devices with
   a maximum width of 639px (e.g., < 640)
*/
@media screen and (max-width: 639px) {
    /* Use `smallimage.jpg` on these devices instead of the above */
    .some-content {
        background-image: url(smallimage.jpg);
    }
}

上記の降順に注意してください: 最初に最大のデバイスを指定し、次に小さいデバイスを指定し、次に小さいデバイスを指定して、後者のクエリが前のクエリを上書きするようにします (たとえば、1024 ピクセルの画面を持つデバイスは最初のデバイスの両方に一致するため)。 2 つのルール）。

于 2012-12-08T10:16:43.847 に答える
1

body {width: 100%; のようなものでデザインできます。高さ: 100%; 位置:相対;}

ブラウザの互換性のためにこの問題に直面します。

あなたのcssでそれを定義して、あなたが望むどんなクラスでも持つことができます。私は自分のウェブサイトのためにそれをやったので、同じ画像をあなたのために働かせることができます.

于 2012-12-08T10:21:03.930 に答える