The min/max-width media query doesn't make grammatical sense

Question

I\'m finding the concept of the (min-width/max-width) media query a bit confusing.

Naturally if I was to design a media query I would want to say (in pseudo-code)....

Answer 1

The confusion here is that there is both a min-width CSS property and media query with the same name:

@media (min-width: 420px) {...} /* This is read-only and is set to screen size */

.element { min-width: 420px; ...} /* This is setting a property of the selected element */