How can I append a media query to a <style> tag?

Question

I'm using Skrollr for my Parallax animations and via Skrollr.stylesheets, I can use Parallax keyframes, instead of writing them inline.

To have the plugin use external stylesheets for the keyframes, it's using AJAX to search the stylesheets, imported via <link>. Therefor, you need to host your website somewhere or have a local server to see those in action.

In order to work locally without a local server, best way is to have your keyframes within a <style> tag, within your head of the page.

However, using parallax keyframes on a mobile device is devastating for the performance. Therefor, I would like to have the parallax keyframes only to be executed on devices with min-width:40.063em.

Too bad, I can't use a @media query on <style> tags.

A sample of a piece of keyframe:

        #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
        }
    }

Who knows a way to use media queries/Have the above CSS keyframes loaded on devices with at least a min width viewport of 40.063 em - And not use something like <link>?

Thanks!

apologies if it's a little incomprehensible

Answer 1

You can use @media query inside of a <style> tag -

<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>