仅为移动设备加载图像

Question

仅为移动设备加载图像

7

我想知道是否可能让我的首页仅加载专为移动用户设计的图片。我知道可以使用javascript实现，但我想知道是否可以仅使用CSS实现相同的效果。我尝试进行了一些研究，但找不到我需要的内容。我不是指根据屏幕大小调整图片大小，而是加载适用于移动设备的图片。

- S.Reyes

你是指使用HTML img标签还是使用CSS背景？ - frnt

@frnt 使用 CSS 背景 :) - S.Reyes

4个回答

2

是的，这是可以实现的。您可以使用媒体查询。下面是一个CSS示例：

#yourimage {
    display: none;
}

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

这段代码是用于HTML图片的。以下是JSFiddle链接：

https://jsfiddle.net/vqfLokpa/

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

- NullDev

嘿，谢谢你的回复。情况是这样的，我有两张图片。其中一张是用于桌面网站的，它相当大。但是对于较小的屏幕（移动设备），我想加载该图片的较小版本。 - S.Reyes

然后只需将第一张图片设置为 display: none;，新图片设置为 display: block;。如果您不确定如何实现它，我已经在帖子中编辑了一个 JSFiddle。 - NullDev

但是这样不会加载两张图片，降低性能吗？因为在这种情况下，我的首页上有相当多的媒体。 :) - S.Reyes

1

好的，浏览器只会加载应用于它的CSS。因此，您可以为桌面设置媒体查询并将图像放在其中。然后它就不会在手机上加载。 - NullDev

啊，我明白了！谢谢，伙计 :) 我想这可能就是我要找的东西 :D - S.Reyes

2

您可以使用媒体查询来根据屏幕尺寸应用类。

#img {
    display: none;
}

/* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
   #img{
     display: block;
   }

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

- cnrhgn

嘿，感谢你的回答！但如果我采用这种方法，它不会把所有图片加载到页面上并降低性能吗？我在想是否可以使用纯CSS仅加载所需的图像到页面上。 - S.Reyes

无论如何，您的所有图像都将在开始时加载，因此您需要优化图像，以便无论在移动设备还是桌面上显示什么内容，它们都不会减慢网站速度。但这应该允许您在任何屏幕尺寸上隐藏和显示所需内容。 - cnrhgn

1

根据您对@NullDev的评论，您需要创建一个适当大小的div，并将图像作为背景图像应用于元素，以通过CSS条件加载内容。

例如：

HTML：

<div id="image"></div>

CSS：

#image {
  position: relative;
  width: 400px;
  height: 400px; 
  background-image:url('/path/to/image');
  background-size: cover;
  background-repeat: no-repeat;
}

然后应用媒体查询：

@media only screen and (max-width : 480px) {
   #image{
     background-image:url('/path/to/mobile/image');
   }
}

我希望这可以帮助到你。

- thisiskelvin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- frnt · Accepted Answer

利用媒体查询以不同的屏幕分辨率更改background-image，如下所示：

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示例。