使用媒体查询的 css 图像交换移动与桌面

Question

首先感谢所有提供意见的人。我们非常接近解决方案！！！我们复制了整个 div，只删除了第二个 div 的视差内容，并在第二个 div 中将 show-on-desktop 替换为 show-on-mobile。

很遗憾，移动版没有显示移动版。

这是样式表

.show-on-desktop {
  /* display can be inline-block, just choose one that suits your need*/
  display: block;

  /* it's your call what the break point is */  
  @media screen and (max-width: 1440px) {
    display: none;
  }
}

.show-on-mobile {
  /* display can be inline-block, just choose one that suits your need*/
  display: none;

  /* it's your call what the break point is */  
  @media screen and (max-width: 411px) {
    display: block;
  }
}

这是显示 div 的更新代码

<div class="show-on-desktop bg-img parallax-content" style="background-image: url(img/home-desktop.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375); background-position: 0px 199.4px;" data-stellar-background-ratio="0.5"></div>

<div class="show-on-mobile bg-img" style="background-image: url('img/home-mobile.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375');"></div>

---

这是原帖

我有一个客户正在运行一个引导框架主题，该主题在页面上有视差部分。这些部分在笔记本电脑或平板电脑上看起来很棒，但在手机上，它只是抓住了大图像的左上角。

我向客户建议，我们在服务器上编写一个 PHP 检测脚本，将设备识别为移动设备或非移动设备，然后在 PHP 中交换图像，以便图像在手机上看起来最佳。

但它让我想到必须有一种方法可以在 CSS 中实现。我对移动 CSS 不太熟悉，所以我认为这可能是我们社区的一篇有趣的帖子。

这是显示图像的一行代码。

<div class="bg-img full-height  parallax-content" style="background-image: url('img/image-name.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375');" data-stellar-background-ratio="0.5"></div>

我正在寻找的是，如果它的移动设备而不是显示 image-name.jpg，它将显示为移动设备大小正确的 image-mobile.jpg（不同的文件）。

同样，这可以在 PHP 中完成，但在 CS 或 JS 中应该有办法做到这一点。有任何想法吗？提前致谢。

Answer 1

这就是媒体查询的用途。

@media only screen and (min-width: 601px) {
  .bg-img {
    background-image: url('img/image-name.jpg');
  }
}

@media only screen and (max-width: 600px) {
  .bg-img {
    background-image: url('img/image-mobile.jpg');
  }
}

Answer 2

这可以在 CSS 中使用 media query 轻松完成

.show-on-desktop {
  /* display can be inline-block, just choose one that suits your need*/
  display: block;
  
  /* it's your call what the break point is */  
  @media screen and (max-width: 1440px) {
    display: none;
  }
}

.show-on-mobile {
  /* display can be inline-block, just choose one that suits your need*/
  display: none;
  
  /* it's your call what the break point is */  
  @media screen and (max-width: 411px) {
    display: block;
  }
}

<div class="show-on-desktop" style="background-image: url('img-desktop.jpg');" data-stellar-background-ratio="0.5"></div>

<div class="show-on-mobile" style="background-image: url('img-mobile.jpg');" data-stellar-background-ratio="0.5"></div>

Answer 3

有多种方法可以解决这个问题。媒体查询将是最可靠的查询。

不过你也可以尝试使用html5的图片标签，比如：

 <picture>
   <source 
      media="(min-width: 650px)"
      srcset="images/img1.png">
   <source 
      media="(min-width: 465px)"
      srcset="images/img2.png">
   <img src="images/img-default.png" 
   alt="">
</picture>