替换图像以供移动查看答案

【问题标题】：Substituting images for mobile viewing替换图像以供移动查看
【发布时间】：2015-07-31 23:09:51
【问题描述】：

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

当前的 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;
}

【问题讨论】：

标签： html css iphone mobile

【解决方案1】：

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

【讨论】：

这是否意味着之前的图像在后台加载还是设置为“Display:none”？
之前的 CSS 设置将被忽略，并使用指定的新规则。

【解决方案2】：

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

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

【讨论】：