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

布伦丹·亨利(B​​rendan Henry)

我有一个可在平板电脑和手机上运行的android应用。我的内容是从资产文件夹加载html文件。我的问题是我想在平板电脑和手机上使用不同的图像尺寸。

这是手机上图像的代码。

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

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

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

乔伊·庄(Joey Chong)

您可以为此使用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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

动画屏幕可在手机上使用,但不适用于平板电脑

滚动事件不适用于手机

输入类型日期仅适用于手机

适用于Android手机的指纹API

平板电脑和手机中导航抽屉的不同宽度

带Android手机/平板电脑的Zed相机

手机和平板电脑模块与Android库

在Play商店中发布适用于手机和手表的Android应用

UiAutomator检测平板电脑与手机

我可以构建基于Java的游戏并将其移至Ubuntu,以用于未来的平板电脑和手机吗?

Android Google Maps显示在手机中,但未显示在平板电脑中

如何在Android中为平板电脑和手机设置不同的方向

适用于智能手机和平板电脑的Android应用

为Android手机和平板电脑创建不同的布局

建议为平板电脑和手机开发?

片段中的操作栏-平板电脑和手机

Xamarin.Forms平板电脑和手机

css3视口:适用于chrome模拟器,不适用于android手机

CSS菜单不适用于手机或平板电脑

适用于Android,iOS和Windows平板电脑的Cordova滑动事件检测选项

如何使Android在手机和平板电脑的应用中佩戴Vibrate?

媒体查询适用于手机,但不适用于平板电脑

平板电脑和手机使用不同的用户界面

手机/平板电脑的纵向模式和Android TV的横向模式?

Codenameone 中手机和平板电脑的样式布局

适用于 Azure 的 Android 手机 MFA

支持手机和平板电脑,而不是平板电脑

react native 中响应图像的分辨率(在手机和平板电脑上不模糊)

横向的 Android 手机正在采用平板电脑布局