适用于 Android 平板电脑和手机的 Html 中不同的图像宽度

Question

我有一个在平板电脑和手机上运行的安卓应用。我的内容是从 assets 文件夹中加载 html 文件。我的问题是我想在平板电脑和手机上使用不同的图片尺寸。

这是手机上图片的代码。

<img src="check_yes_tick_parent.png" width="8%"/>

但是这在平板电脑上太宽了，理想情况下我希望宽度为 3%。

我知道我可以为每个文件制作两个 html 文件。即一个用于手机，一个用于平板电脑。但是有没有更简单的方法？

Answer 1

您可以为此使用 css 和媒体查询，那么您不需要 2 个或更多的 html 文件。

例如：

在html处：

<div id="image"></div>

在 css 处：

@media screen and (min-width: 1024px) {
    width: 100px;
    height: 100px;
    background-image: url(check_yes_tick_parent.png);
}
@media screen and (width: 768px) and (height: 1004px) {
    width: 50px;
    height: 50px;
    background-image: url(check_yes_tick_parent_for_pad.png);
}

可以参考CSS3 @media Rule