Question

我使用Skrollr作为我的Parallax动画，并通过Skrollr.stylesheets，我可以使用Parallax关键帧，而不是内联编写它们。

要让插件使用外部样式表作为关键帧，它使用AJAX搜索样式表，通过<link>导入。因此，您需要在某个地方托管您的网站，或者拥有一台本地服务器来查看实际运行的网站。

要在没有本地服务器的情况下在本地工作，最好的方法是将关键帧放在<style>内的head标记内。

但是，在移动设备上使用视差关键帧会对性能造成破坏性影响。因此，我希望视差关键帧只能在min-width:40.063em的设备上执行。

太糟糕了，我无法在@media query代码上使用<style>。

一个关键帧的样本：

        #slide-1 .bcg, #slide-3 .bcg, #slide-4 .bcg, #slide-5 .bcg, #portfolio .bcg, #meerPortfolio .bcg {
        -skrollr-animation-name:bg150pxUp;
    }

    @-skrollr-keyframes bg150pxUp {
        bottom {
            background-position:50% 0px;
        }

        top-bottom {
            background-position:50% -150px
        }
    }

谁知道使用媒体查询的方法/将上述CSS关键帧加载到至少具有40.063 em的最小宽度视口的设备上 - 而不是使用<link>之类的内容？

谢谢！

apologies if it's a little incomprehensible

Answer 1

你可以在@media query代码中使用<style> -

<style type="text/css">

@media all and (min-width: 40.063 em) { /* Change to whatever media query you require */


#slide-1 .bcg, #slide-3 .bcg, #slide-4 .bcg, #slide-5 .bcg, #portfolio .bcg, #meerPortfolio .bcg {
    -skrollr-animation-name:bg150pxUp;
}

@-skrollr-keyframes bg150pxUp {
    bottom {
        background-position:50% 0px;
    }

    top-bottom {
        background-position:50% -150px
    }
}
}

</style>

如何将媒体查询附加到<style>标记？</style>

1 个答案: