Here is how to model basic logic in media queries.
With keyword and
.
# Target viewport widths between 500 and 800px
@media (min-width: 500px) and (max-width: 800px)
Comma-separated.
# Target viewport widths below 500 or above 800px
@media (max-width: 500px), (min-width: 800px)
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.