@media

Matched queries

Resize window to see the difference

(width < 400px)
(400px <= width < 500px)
(500px <= width < 600px)
(600px <= width < 700px)
(700px <= width)

not (min-width: 400px)
(min-width: 400px) and (not (min-width: 500px))
(min-width: 500px) and (not (min-width: 600px))
(min-width: 600px) and (not (min-width: 700px))
(min-width: 700px)

(max-width: 399px)
(min-width: 400px) and (max-width: 499px)
(min-width: 500px) and (max-width: 599px)
(min-width: 600px) and (max-width: 699px)
(min-width: 700px)

------

(min-width: 400px)
(min-width: 500px)
(min-width: 600px)
(min-width: 700px)

(max-width: 399px)
(max-width: 499px)
(max-width: 599px)
(max-width: 699px)

------

not (min-width: 400px)
not (min-width: 500px)
not (min-width: 600px)
not (min-width: 700px)