Posted 4 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.

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
4 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