Materialise：视差不适用于移动设备

Question

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

初始化了代码

如果有人知道解决此问题的简单方法，请告诉我。如果你没有足够的我的代码，也告诉我，我会post更多（这是我的第一个post，不知道你们真正需要多少）

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

亲切的问候，莫特

<!--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 像素。 documentation 显示您可以使用以下 CSS 轻松更改它：

.parallax-container {
    height: 150px;
}

这也会改变屏幕较大的设备的高度。使用 media query gives us the ability to choose which screen sizes 应该具有更改的容器高度：

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

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

Materialise：视差不适用于移动设备

Materialize: parallax doesn't work for mobile

materialize

parallax