使用 css 为移动设备显示另一张图片

Question

.bg-img-1 {
  background: url("../images/bg-img-01.jpg"); 
}

这是在网站中加载背景图片，我想为移动设备显示另一张图片。我该怎么做？

Answer 1

你需要使用媒体查询:)

对于计算机查询，您使用一张图片，对于移动查询，您使用另一张图片:) 检查 W3C 它可以帮助您:)

Answer 2

您可以使用媒体和其他尺寸查看另一张图片

  @media screen and (max-width: 940px) {
.bg-img-1 {
  background: url("another image"); 
}
}

Answer 3

您可以在 css:

中使用媒体查询

// 默认图片

.bg-img-1 {
  background: url("../images/bg-img-01.jpg"); 
}

// 适用于平板电脑及更高版本

@media screen and (max-width: 768px){
  .bg-img-1 {
     background: url("../images/bg-img-01-tablet.jpg"); 
  }
}

您可以针对不同的屏幕分辨率使用多个媒体查询。

Display another image for mobile using css