移动网络应用程序:在多分辨率设备中使用同一组图像

Mobile web app : Using same set of images in multiple resolution devices

本文关键字:图像 一组 应用程序 网络 移动网 多分辨率 移动      更新时间:2023-09-26

我想知道,我是否可以为我的移动web应用程序维护一个CSS文件。该网络应用程序针对不同分辨率的安卓设备。所以我想知道,我可以使用相同的图像集,并使用任何CSS样式缩小它,而不是为每个分辨率保留多个图像吗?该Web应用程序是使用html5、css3和javascript构建的。

我知道我们可以使用css媒体查询,但通过它,我需要根据设备宽度加载不同的图像。我正在尝试对所有分辨率的设备使用相同的图像。如果我在代码中保留高分辨率的图像。

这可能吗?请告诉我。

提前谢谢。感谢您的帮助。

您可以这样做:

@media screen and (max-width: 480px){
  .element { background-image: url(../images/bg1.img); }
}
@media screen and (min-width: 800px){
 .element { background-image: url(../images/bg2.img); }
}

但您也可以将其设置为100%(如果它适合任何大小的屏幕)