Question

例如，如果我的网站有两组图像，则一组是低分辨率，另一套是高分辨率，我向1280宽度用户显示屏幕尺寸的低分辨率，其他是高分辨率图像，我该怎么做？用javascript？或任何其他方法？可以在css或html中定义吗？

Answer 1

您可以使用CSS media queries。有关媒体查询的更多信息here。

示例：

/* 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像素屏幕的设备将匹配两者前两条规则）。

Answer 2

你可以用类似的东西设计它身体{宽度：100％;身高：100％;位置：相对;}

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

在你的CSS中定义你可以拥有你想要的任何课程。我已经为我的网站做了这个，你可以为你工作相同的图像。

如何输出不同的图像取决于用户屏幕？

2 个答案: