Posted 2 months ago. Visible to the public.

Logic in media queries

Here is how to model basic logic in media queries.

AND

With keyword and.

Copy
# Target viewport widths between 500 and 800px @media (min-width: 500px) and (max-width: 800px)

OR

Comma-separated.

Copy
# Target viewport widths below 500 or above 800px @media (max-width: 500px), (min-width: 800px)

NOT

Needs a little overhead with not all and.

Copy
# Target devices that can't hover @media not all and (hover)

See CSS: Using interaction media detection on why you'd need this.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
2 months ago
by Dominik Schöler
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more