Remove `only screen and` from `@media` inside reflex order helpers about reflex HOT 3 CLOSED

Thanks for explaining it. I agree with your proposal and your reasons. I think we can follow the majority and use @media (min-width: 1200px)

from reflex.

Personally, I don't think there is a risk of not specifying screen.
Using print is only for very specific cases that can be taken into account in the CSS of the project in which Reflex is imported.

I took a look at

• Foundation (for sites) : @media print, screen and (min-width: 40em) { -> print, screen are always declared
• Bootstrap : @media (min-width: 1200px) { -> nothing specific is declared
• UiKit : @media (min-width: 1200px) { -> nothing specific is declared
• MaterialiseCSS : @media only screen and (min-width: 1200px) { -> only screen and are always declared

After some research W3C Media Types and W3C Media Queries

media (max-width:1200px) -> Is for a window with a max-width of 1200px.

@media screen and (max-width:1200px)-> Is for a device with a screen and a window with a max-width of 1200px.

@media only screen and (max-width:1200px) -> For only, there is a quote from W3C :

The keyword ‘only’ can also 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. (W3C Recommendation 19 June 2012)

The idea behind my proposal is to homogenize all the @media.
So we can use for all @media (min-width: 1200px) { or @media screen and (max-width:1200px)

Tell me what you think about.
Best Regards
Yoann

from reflex.

I think my intention here was not to apply the grid to any other media type such as print for example. Is there any risk involved in not specifying screen ?

from reflex.