@media

Active CSS supports standard CSS media queries (@media) in the config, and you can use @media both inside and outside event declarations.

There are different ways to use media queries. Remember - you put this in your Active CSS config file, not your CSS file...

Outside event declarations, like CSS:

@media (max-width: 1020px) {
    body:scroll {
        func: requestScroll;
    }
}

Inside event declarations:

body:scroll {
    @media (max-width: 1020px) {
        func: requestScroll;
    }
}

As an ACSS conditional function:

body:if-media-max-width(1020px):scroll {
    func: requestScroll;
}

As an ACSS conditional function used with an @if statement:

(This is the most performant method if you have several @media queries attached to the same event doing different things, eg. different actions for mobile, tablet and desktop. See the if-media-max-width example for more info.)

body:scroll {
    @if media-max-width(1020px) {
        func: requestScroll;
    }
}

Or as an Active CSS dedicated conditional

You can do this if you need to have more than one conditional function or if you would rather have your condition declared in one place and give it a name:

@conditional smallDevice {
    if-media-max-width: 1020px;
}

body:smallDevice:scroll {
    func: requestScroll;
}

 

See the Conditionals section for more information on using conditionals.