Logic in media queries
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.