Question

您好社区，并提前感谢您的帮助。我的问题是，我想在计算机屏幕上显示一些图像，但是将这些图像切换到移动设备上的一个合成图像。这是我的代码：

@media screen and (max-width:480px) {
    .hidden_mobile {
        display:none;
        background-image: url("http://julienleveau.com/wp-content/uploads/2018/04/Mobile-version.jpg");
 	background-repeat: no-repeat;
	background-size: contain;
    }
}

<div class="col-sm-1">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/top100.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/WW-1.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/fearless.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/bowp-300-1.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/ispwp.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
</div>
<div class="col-sm-1">
</div>

到目前为止，它适用于计算机，但在移动设备上却没有。它只是将图像显示在彼此之上。

谢谢

Answer 1

这里有2个问题：

1）您尝试在移动设备中隐藏的元素有一个内联display:block，它会覆盖样式表中的display:none。这就是为什么你一直在移动中看到图像的原因。在下面的运行代码段中，我删除了所有内联样式，并将边距移动到样式表中的类。您可以在此处阅读有关CSS规则特异性的更多信息：https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

2）即使您删除内嵌样式，也不会看到所需的背景图像，因为您已将其添加到具有display:none的元素中。您需要将该背景图像添加到我在div中使用类.mobile_only创建的其他元素。

通过以下代码段中的这两项更改，您可以根据屏幕的分辨率查看不同的图像。

＆＃13;

.hidden_mobile {
height: auto; width: 100%; margin: 0 auto 15px; 
}
@media screen and (max-width:480px) {
  .hidden_mobile {
    display: none;
  }
  .mobile_only {
    height: 250px;
    background-image: url("http://julienleveau.com/wp-content/uploads/2018/04/Mobile-version.jpg");
    background-repeat: no-repeat;
    background-size: contain;
  }
}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/top100.jpg" alt="">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/WW-1.jpg" alt="">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/fearless.jpg" alt="">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/bowp-300-1.jpg" alt="">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/ispwp.jpg" alt="">
</div>
</div>
<div class="col-sm-1">
</div>
   <div class="mobile_only"></div>
</div>

＆＃13;

响应图像 - 不同屏幕尺寸的不同图像

1 个答案: