具体化：视差不适用于移动设备

Question

看来我偶然发现了一个小问题。我的 2 个视差在正常模式下工作，但当我缩小到移动版本时，我的图像只是静止和全缩放，因此效果消失了。我没有对视差做任何特别的事情(下面的代码(，也没有自己在图像中添加任何样式。我还使用 jQuery 初始化了代码。

如果有人知道这个问题的简单解决方法，请告诉我。 如果你没有足够的我的代码，也让我知道，我会发布更多(这是我的第一篇文章，不知道你们真正需要多少(

无论如何，已经非常感谢了！

亲切问候 穆特

<!--parallax 1-->
<div class="parallax-container">
<div class="parallax">
<img src="IMAGES/DSC_2452c.jpg" alt="" class="responsive-img">
</div>
</div>
<!--parallax 2-->
<div class="parallax-container">
<div class="parallax">
<img src="IMAGES/DSC_2682c.jpg" alt="" class="responsive-img">
</div>
</div>

Answer 1

这可能是由于.paralax-container的默认高度为 500 像素。该文档显示您可以使用以下 CSS 轻松更改此设置：

.parallax-container {
height: 150px;
}

这也会更改屏幕较大设备上的高度。使用媒体查询使我们能够选择哪些屏幕尺寸应具有更改的容器高度：

@media only screen and (max-width: 600px) {
.parallax-container {
height: 150px;
}
}

注意：如果您从 Sass 进行编译，则可以使用文档中所示的预定义变量。