Question

我有一个在平板电脑和手机上运行的Android应用程序。我的内容是从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

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

1 个答案: