移动网站中的图片

Question

我正在创建一个移动版Wordpress网站。如果在移动设备上查看，我会使用媒体查询链接到移动css文件。当我在博客上发帖时，手机屏幕上的图片显然会太大。我应该如何解决它？

Answer 1

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

img{
    max-width:100%;
}

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

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

上面的代码将在设备视口中缩放站点，如果您想停止缩放设置用户可缩放=无

Answer 2

一个好的解决方案是为不同的屏幕大小创建"bucket"，并根据媒体查询使用不同的背景图像。

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

• 400px用于300-500px
• 500-800px为800px
• 1200px用于800-1200px
• 1400像素换1200像素+

在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;
    }
}

同时使用"最小宽度"one_answers"最大宽度"可确保您的设备仅下载适合特定"bucket"的图像。