仅为移动设备加载图像

Question

我想知道我的首页是否可以加载专供移动用户使用的图像。我知道使用 javascript 是可能的，但我想知道是否可以仅使用 CSS 来实现相同的效果。我试图做一些研究，但找不到我要找的东西。我的意思不是根据屏幕大小调整图像大小，而是加载适合移动设备的图像。

Answer 1

利用不同的media query变化如下，background-imagescreen resolutions

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。

Answer 2

是的，这是可能的。您可以使用媒体查询。CSS 示例：

#yourimage {
    display: none;
}

@media (max-width: 500px) {
    #yourimage {
        display: block;
    }
}

此代码适用于 html 图像。这是一个 JSFiddle：

https://jsfiddle.net/vqfLokpa/

只需点击运行，然后开始缩小浏览器窗口。