What is the difference between
@media all and (min-width: 500px) {
// some css
}
and
@media (min-width: 500px) {
// some css
}
Quite often I see the first declaration, but is there any benefit of including all
?
Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.
The advantage of using media queries is that you can display different CSS styles depending on the size of the browser window and viewport. You simply use it in your stylesheet like normal CSS.
Depending on how you layout your site you may need to use more or less queries, as you only need a query for each seperate layout/design of the site. A good choice for basic use would be Smartphone, Tablet, Standard Screen, HD Screen or 4. perfect, exactly what i was looking for.
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ' width ', ' height ', and ' color '.
There is no benefit. According to MDN:
Unless you use the
not
oronly
operators, the media type is optional and theall
type will be implied.
The all
type is implied, so @media (min-width: 500px)
is interpreted as @media all and (min-width: 500px)
and the two statements are equivalent. The latter is just needlessly specific.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With