Posted 15 days 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.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Author of this card:

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