How to use > or < (Greater than and Less than ) Symbols in Media Queries

Issue

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) {}

Solution

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) {}

Answered By – BoltClock

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published