I wanted to know if there is any difference in css when using one of these media queries,
Example A:
@media(max-width:770px) {
.texto{
color:red
}
}
Example B:
@media screen and (max-width: 770px) {
.texto{
color:red;
}
}
Example C:
@media only screen and (max-width: 770px) {
body {
color:red;
}
}
I tested here with each of them, and they all worked.
Is there a difference?
Yes there are differences, even though not all of @media is screen , can be print eg
@media(max-width:770px) {
.texto{
color:red
}
}
In the above example, for any media that has a width of up to 770px, even a TV, Monitor and even a Printer, the CSS rule contained therein will apply.
In this example below it means that in media of type screen and with screens up to 770px wide the rule will be applied. (this and is very important because CSS is only applied if two screen and max-width match)
@media screen and (max-width: 770px) {
.texto{
color:red;
}
}
About and
See that your @media rule can be quite complex, and you can chain several parameters that must be met for the rule to be applied. For example:
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
body { line-height: 1.4; }
}
Notice that you are adding "requirements" with and , so that this css is applied needs:
a mídia tem que ser tela
**e** ter no mínimo 320px de largura
**e** no máximo 480px de largura
**e** a tela deve ter densidade de pixel de 2
If one of the requirements does not return true the rule is not enforced
The
andoperator is used for combining multiple media features together into a single media query, requiring each chained feature to returntruein order for the query to betrue. It is also used for joining media features with media types.
In this other example the only selector means that only for screen media and with screens up to 600px the rule will be applied. This rule will not apply to other media such as print for example
@media only screen and (max-width: 600px) {
body {
color:red;
}
}
Let's suppose you have a yellow element that appears well on your computer screen, but when you print the yellow it will not look nice and you would like it to be black, how could you solve it? Simple, using @media only print . So in your CSS you would have something like:
div {
background-color: yellow;
width: 100px;
height: 100px;
}
@media only print {
div {
background-color: black;
}
}<div></div> Notice that with the above example when you give a Ctrl + P the div will not appear Yellow, it will get Black!
About Only
The
onlyoperator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. If you use theonlyoperator, you must specify an explicit media type .
The only operator is used to apply a style only if an entire query matches and is useful to prevent older browsers from applying selected styles. If you use the only operator, you must specify an explicit media type. (in this case if the media type is screen , print or speech )
A clarification about Only
The keyword 'only' can be used to hide style sheets from older user agents. User agents must process media queries starting with 'only' as if the 'only' keyword was not present.
It seems that the only attribute can also be used for older browsers to ignore the css rule contained in @media , since they may not distinguish between different media types, see that they can not see difference between @media screen of @media print , for these browsers everything would be one thing. So to make them ignore the rule, use only .
print and screen there is no need for only , however, in browsers that do not understand the differences. between the media uses only so that it does not recognize the tag and ignore it.
The big difference has to do with the resolutions that you want the 1 line of code and for that resolution (takes the resolution and adjusts to other screens) the 2 line and to screen and the resolution (can read in other screens adjusting) and the 3 line of code and only for screen and that resolution (only reads on screens and that specific formatting) but le the link explains better than I (when I say screen are monitors type pc) google dev info
It has a difference, yes. How much does% use for anything today? Probably not.
According to the W3C specification document about media queries, the logical operator only serves to prevent specified styles from being displayed in older browsers that do not support media features, such as "max-width" for example. p>
The CSS link below, for example, would be ignored by browsers that do not understand the media feature only .
color
The keyword 'only' can be used to hide style sheets from older user agents. User agents must process media queries starting with 'only' as if the 'only' keyword was not present.