Question

Can we use the “>” or “<” symbols(Greater than and Less than ) in media queries? for example I would like to hide a dive for all monitors less than 768px. can I say some thing like this:

@media screen and (min-width<=768px) {}

Answer 1

Media queries don’t make use of those symbols. Instead, they use the min- and max- prefixes. This is covered in the spec:

• Most media features accept optional ‘min-’ or ‘max-’ prefixes to express “greater or equal to” and “smaller or equal to” constraints. This syntax is used to avoid “<” and “>” characters which may conflict with HTML and XML. Those media features that accept prefixes will most often be used with prefixes, but can also be used alone.

So, instead of something like (width <= 768px), you would say (max-width: 768px) instead:

@media screen and (max-width: 768px) {}