html - 仅在笔记本电脑和台式机上启用视差效果？

Question

有没有办法只在笔记本电脑和桌面 View 上触发视差效果？

Atm 我有以下内容，但它不允许在某些设备浏览器上显示图像:特定的 Safari。

.parralax {

/* Full height */
height: 100%; 

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

我的 HTML 在我想要视差效果的部分中仅引用了它。

<section id="home" class="home parralax bg-img fix">

Answer 1

确保将外部样式表放在文档的最前面，这样它就会覆盖视差规则。

/*Mobile 480px*/
/*Desktop 992px*/
/*Huge 1280px*/

@media screen and (min-width: 480px) and (min-width: 768px), (min-width: 992px), (min-width: 1280px) {
.parralax {
   /* Full height */
   height: 100%; 

   /* Create the parallax scrolling effect */
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
}