Correct syntax for `min/max width` + `not (device type)` CSS media queries

Issue

What the correct syntax for below media query?

@media (min-width: 960px) and not print

The following media query

@media print and (min-width: 960px)

is valid. Same for @media not print and (min-width: 960px), but the "not" keyword is affecting to both print and (min-width: 960px). I want to exclude only print.

Solution

So you need to target narrow screens and print devices:

@media print or (max-width: 960px)

You need to target the rest:

@media not print and (max-width: 960px)

The first one, targets anything that is print or below 960px wide. The second will target anything non print that is wider than 960px

Answered By - Salketer