2

例如，如果我的网站有两组图像，一组是低分辨率的，另一组是高分辨率的，我将低分辨率显示给 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 像素的设备将匹配第一个两条规则）。

于 2012-12-08T10:16:43.847 回答
1

你可以用 body {width: 100%; 高度：100%；位置：相对；}

您将面临浏览器兼容性问题。

在你的 css 中定义它，你可以拥有任何你想要的类。我已经为我的网站完成了它，您可以使用相同的图像为您工作。

于 2012-12-08T10:21:03.930 回答