CODEWITHSUNDEEP
cssresponsive-design
bodacydo
bodacydo

Reputation: 79319

Should I always add `screen` to `@media` query? Everything appears to work with or without `screen` condition

I'm learning responsive design and I've been messing around media queries.

Does anyone know if I absolutely need to use @media screen? When writing queries to make my design responsive everything works WITH or WITHOUT screen.

Upvotes: 14

Views: 3818

Answers (2)

kittykittybangbang
kittykittybangbang

Reputation: 2400

For 99.9% of cases out there, screen is all that's ever used to view your site, so could be left out - when not specified, all is implied. However, there are other possibilities out there.

Think visually impaired users, for example. Some visually impaired web surfers use screen readers, which do not visit your site as screen. There are also tactile web browsers that present information from sites as Braille. Again, not a screen.

As mentioned before, these are certainly anomalous users; however, depending on the traffic you expect on your site, it's encouraged as best practice to include the screen in your @media queries when designing for a screen display.

Other media options are:

  • braille
  • embossed
  • handheld
  • print
  • projection
  • speech
  • tty
  • tv

Update (June 2017)

As of Media Queries 4, much of this was simplified—all but a few of the above are deprecated. Currently supported are the following:

  • all
  • print
  • screen
  • speech

See the @media page on the Mozilla Developer Network for details, and thanks to @romellem for pointing out these changes!

Upvotes: 10

Marc Baumbach
Marc Baumbach

Reputation: 10473

You don't need to use screen. It is simply a media type selector which will only apply the styles for the media types that match. For example, if you said @media print it would only apply the styles when printing the document.

It all depends on how you want it represented on different medias. When omitted, it applies to all media types.

Quoting from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries:

Unless you use the not or only operators, the media type is optional and the all type will be implied.

Upvotes: 2

Related Questions