I inherited this and was wondering what does a media query without a "media type" do?
@media (min-width: 768px) {
.commentlist-item .commentlist-item {
padding: 0 0 0 2em;
}
}
Standard syntax per www.w3schools.com/css/css3_mediaqueries.asp
@media not|only mediatype and (expressions) {
CSS-Code;
}
The @media rule is used in media queries to apply different styles for different media types/devices. Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device. orientation (is the tablet/phone in landscape or portrait mode?)
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
only screen: The only keyword is used to prevent older browsers that do not support media queries with media features from applying the specified styles. Syntax: @media only screen and (max-width: width) Example 2. <! DOCTYPE html>
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.
If the media type is not explicitly given it is
all
. ~ W3C Media Queries
In other words, an @media rule without a media type is shorthand syntax, where all
is implied.
More from the spec:
A shorthand syntax is offered for media queries that apply to all media types; the keyword
all
can be left out (along with the trailingand
). I.e. if the media type is not explicitly given it isall
.EXAMPLE 5
I.e. these are identical:
@media all and (min-width: 500px) { ... } @media (min-width: 500px) { ... }
As are these:
@media (orientation: portrait) { ... } @media all and (orientation: portrait) { ... }
...
EXAMPLE 7
I.e. these are equivalent:
@media all { ... } @media { ... }
source: https://www.w3.org/TR/css3-mediaqueries/#media0
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