Question

我的网站上有图像，我需要相对高分辨率的桌面，但是当我在手机上查看这些图像时，图像太大而且没有加载。每张图像的图像大约为140kb。我有一个较低的res版本的移动版。如何设置交换移动设备图像的规则？

当前的CSS：

.staff-1{
    background:url("../matt_about_HR.jpg") no-repeat;
    background-position: 50%;
    background-size: cover;
    box-shadow: rgba(0, 0, 0, 0.298039) 4px 4px 10px 0px;
}
.staff-2{
    background:url("../about_shail_photo_HR.jpg") no-repeat;
    background-position: 50%;
    background-size: cover;
    box-shadow: rgba(0, 0, 0, 0.298039) 4px 4px 10px 0px;
}
.staff-3{
    background:url("../about_Leah_photo.jpg") no-repeat;
    background-position: 50%;
    background-size: cover;
    box-shadow: rgba(0, 0, 0, 0.298039) 4px 4px 10px 0px;
}

Answer 1

您可以尝试使用CSS3 @media规则，这将根据浏览器窗口的宽度和高度为您提供不同媒体类型/设备的样式规则。请参阅http://www.w3schools.com/cssref/css3_pr_mediaquery.asp。这也适用于背景图像。

Answer 2

媒体查询是一种方式，并且经常用于此。如果您正在使用Bootstrap CSS，您可以使用hidden-xs，visible-xs等类来交换图像，具体取决于设备大小。我之前使用它来根据设备大小提供完全不同的布局和图像。

您还可以添加retina.js，以便仅在具有视网膜显示的设备上显示更好的质量（更大的文件大小）图像。虽然与您的问题没有直接关系，但我发现它有用并且意味着它不会将@ 2x（双倍文件大小）图像提供给它们没有任何好处的设备。

用图像代替移动观看

2 个答案: