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

.parallax-container {
    height: 150px;
}

这也会更改屏幕较大的设备的高度。使用media query使我们能够选择应该更改容器高度的screen sizes：

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

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

实现：视差不适用于移动设备

1 个答案: