html – 仅为移动设备加载图像

概述我想知道我的首页是否可以加载专用于移动用户的图像.我知道有可能使用 javascript,但我想知道我是否可以使用CSS实现相同的功能.我曾尝试做一些研究,但找不到我要找的东西.我不是指根据屏幕尺寸调整图像大小,而是加载适合移动设备的图像. 利用媒体查询以不同的屏幕分辨率更改背景图像,如下所示, div{ width:100%; height:400px; background:url 我想知道我的首页是否可以加载专用于移动用户的图像.我知道有可能使用 javascript,但我想知道我是否可以使用CSS实现相同的功能.我曾尝试做一些研究,但找不到我要找的东西.我不是指根据屏幕尺寸调整图像大小,而是加载适合移动设备的图像.解决方法 利用媒体查询以不同的屏幕分辨率更改背景图像,如下所示,

div{  wIDth:100%;  height:400px;  background:url('http://placehold.it/350x150/f22/fff');  background-size:100% 100%;}@media screen and (max-wIDth : 480px){ div{  background:url('http://placehold.it/480x150/f12/fff');  background-size:100% 100%;} }@media screen and (max-wIDth : 320px){ div{  background:url('http://placehold.it/320x150/e12/fff');  background-size:100% 100%;} }

<div></div>

检查这个jsFiddle.

总结

以上是内存溢出为你收集整理的html – 仅为移动设备加载图像全部内容，希望文章能够帮你解决html – 仅为移动设备加载图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。