Here is how to model basic logic in media queries.
AND
With keyword and.
# Target viewport widths between 500 and 800px
@media (min-width: 500px) and (max-width: 800px)
OR
Comma-separated.
# Target viewport widths below 500 or above 800px
@media (max-width: 500px), (min-width: 800px)
NOT
Needs a little overhead with not all and.
# Target devices that can't hover
@media not all and (hover)
See CSS: Using interaction media detection on why you'd need this.
Posted by Dominik Schöler to makandra dev (2018-06-05 07:06)