移动改编网站中的图像？答案

【问题标题】：Images in a mobile adapted website?移动改编网站中的图像？
【发布时间】：2013-12-13 17:48:13
【问题描述】：

我正在创建一个适用于移动设备的 Wordpress 网站。如果在移动设备上查看，我使用媒体查询链接到移动 css 文件。当我在我的博客中发布帖子时，这些图像显然对于移动屏幕来说太大了。我该如何解决？

【问题讨论】：

【解决方案1】：

您可以使用下面的 css 来缩放图像。

img{
    max-width:100%;
}

如果你没有在 head 标签中使用视口，那么使用这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" />

以上代码将在设备视口中缩放网站，如果你想停止缩放设置 user-scalable=No

【讨论】：

如果我这样做，整个图像仍将被加载，这会减慢我的网站速度
@Micheal 我刚刚更新了视口代码，如果您没有使用或您的视口代码不相似，请尝试这个。

【解决方案2】：

一个好的解决方案是为不同的屏幕尺寸创建“桶”，并根据媒体查询使用不同的背景图像。

例如，您可以创建 4 个具有图像宽度的存储桶：

300-500 像素为 400 像素
800px for 500-800px
1200px 为 800-1200px
1400px 对应 1200px+

在 CSS 中，您可以像这样创建媒体查询：

#elem {
    max-width: 100%;
}
@media all and (min-width: 300px) and (max-width: 500px) {
    #elem {
        background: url(../images/logo-400.jpg) left center no-repeat;
    }
}
@media all and (min-width: 500px) and (max-width: 800px) {
    #elem {
        background: url(../images/logo-800.jpg) left center no-repeat;
    }
}
@media all and (min-width: 800px) and (max-width: 1200px) {
    #elem {
        background: url(../images/logo-1200.jpg) left center no-repeat;
    }
}
@media all and (min-width: 1200px) {
    #elem {
        background: url(../images/logo-1400.jpg) left center no-repeat;
    }
}

同时使用“最小宽度”和“最大宽度”可确保您的设备仅下载适合特定“存储桶”的图像。

【讨论】：