Question

//html code for parallax - help required here.

我在样式表中为视差添加了div，其名称为parallax和parallax css。如何在移动和桌面视图中禁用它？我经历了很多帖子，但没有帮助。

但是我不希望在台式机上禁用它。我只希望它停止在移动设备上工作。可以做些什么吗？当我使用媒体查询时，它在我的桌面上禁用，但在移动设备上可以正常工作。

        </head>
  <style>
@media only screen and (min-width: 320px) and (max-width: 989px) {
.parallax {
background-attachment: scroll !important;
}

视差代码：

.parallax { 
    /* The image used */
    margin-top: 30px;
    background-image: url("images/teodorik-mensl-316897-unsplash.jpg");
    /* Set a specific height */
    height: 500px; 
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
<body>
//parallax declaration
<div id="PaperCall" class="parallax"></div>
</body>

Answer 1

您要查找的内容称为media query，其表示方式是将选择器包装在
@media screen and (min-width: x)中。 @media标记内的所有内容都只会应用于符合指定条件（在这种情况下为最小宽度）的设备。

只需将最小宽度设置为与要包含在Parrallax效果中的最小设备的宽度相对应。可以在 here 中找到常见设备及其对应宽度的列表，但是您可能需要类似480px的东西。

这是一个完整的例子：

@media screen and (min-width: 480x) {
  .parallax {
    /* The image used */
    margin-top: 30px;
    background-image: url("images/teodorik-mensl-316897-unsplash.jpg");
    /* Set a specific height */
    height: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

<body>
  //parallax declaration
  <div id="PaperCall" class="parallax"></div>
</body>

CSS技巧可在手机上禁用视差效果

1 个答案: