用于禁用移动视差效果的CSS技巧

问题描述 投票:-2回答:1
//html code for parallax - help required here.

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

但我不希望它被禁用为桌面。我只是希望它停止为移动设备工作。可以做点什么吗?当我使用媒体查询时,它在我的桌面上禁用,但在移动设备上正常工作。

        </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>
html css parallax
1个回答
0
投票

您正在寻找的是被称为media query,通过将您的选择器包裹在其中来表示 @media screen and (min-width: x)。此@media标记内的任何内容仅适用于符合指定条件的设备(在本例中为最小宽度)。

只需将最小宽度设置为与希望包含的视差效果最小设备的宽度相对应。可以找到常见设备列表及其相应的宽度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>
© www.soinside.com 2019 - 2024. All rights reserved.