Use @media, @media screen and or @media only screen and Have a difference?

Question

I was wondering 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 ran tests here on every one of them, and they all worked.

Differs?

Answer 1

Yes there is difference, up to pq not all the @media is screen, can be print for example

@media(max-width:770px) {
    .texto{
        color:red
    }
}

In the example above it means that for any media that the width is up to 770px, even if it is a TV, Monitor and even a Printer, the CSS rule contained there will be applied.

Already in this example below means that in media like screen and with screens up to 770px wide the rule will be applied. (this and is very important because the CSS is only applied if the two rules screen and max-width correspond)

@media screen and (max-width: 770px) {
    .texto{
        color:red;
    }
}

About the and

Note that your @media rule can be quite complex, and you can chain several parameters that should 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 to the and, soon for this css to be applied need that:

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 applied

The and Operator is used for Combining Multiple media Features Together into a single media query, requiring each chained Feature to Return true in order for the query to be true. It is also used for Joining media Features with media types.

---

In this other example the selector only means that only for media screen 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;
    }
}

Example of use

Let’s assume that you have an element in the color Yellow, which appears right on the Computer Screen, but when printing the Yellow will not look cool and you would like it to be Black, how could you solve this? 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>

Note that with the example above when you give a Ctrl+P to div It won’t turn up Yellow, it’ll turn black!

About the Only

The only Operator 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 the only Operator, you must specify an Explicit media type.

In Portuguese
The operator only 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 operator only, should specify a type of explicit media. (in case if the media type is screen, print or speech)

A clarification on the Only

The keyword ːonly' can also be used to Hide style Sheets from Older user Agents. User Agents must process media queries.

It seems the attribute only can also be used for old browsers to ignore the css rule contained in @media, since they may not distinguish between different media types, see that they may not see difference between a @media screen of a @media print, for these browsers everything would be one thing. So to make them ignore the rule is to use the only.

In short: In browsers who understand the difference between print and screen there is no need for the only, however, in the browser that does not understand the differences between the media only so he won’t recognize the tag and ignore it.

Fonte1: https://developer.mozilla.org/en-US/docs/Web/CSS/@media
Fonte2: https://www.w3.org/TR/css3-mediaqueries/

Answer 2

The big difference has to do with the resolutions you want the 1 line of code and for that resolution(assumes the resolution and adjusts to other screens) the 2 line and screen and the resolution (can read in other screen adjusting) and the 3 line of code and only for screen and that resolution(only reads on screens and that specific formatting) but the link explains better than me ( when I say screen are monitors like pc ) google dev info

Answer 3

There is a difference. only is it good for anything today? Probably not.

According to the W3C Media Specification Document only serves to prevent specified styles from being displayed in older browsers that do not support media Features, such as "max-width" for example.

The CSS linked below, for example, would be ignored by browsers who do not understand the media Feature color.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

The keyword ːonly' can also be used to Hide style Sheets from Older user Agents. User Agents must process media queries.

https://www.w3.org/TR/css3-mediaqueries/