Syntax of a Media Query

A media query is made up of at least the media type and can additionally have one or more media expressions, which return either true or false. For the CSS to be applied, the media type should match the device the page is loaded on and all the media expressions must return true

all and (max-width: 767px)
screen and (max-width: 767px)

The “Not” Logical Operator

not screen and (max-width: 767px)

So for this example, the logic is that if the browser is not a screen device with a width less than or equal to 767px, then the style sheet will be activated.

The “Only” Logical Operator

only screen and (max-width: 767px)

The logic to the media query in this example is exactly the same as before, however, you have now added the only logical operator, which will prevent the styles wrapped in this media query from being applied incorrectly in older browsers.

Using Multiple Expressions

screen and (min-width:768px) and (max-width: 1023px)

The logic for this media query is that if the media type is screen, the viewport is equal to or greater than 768px, and is less than or equal to 1023px, then the style sheet will be activated.