The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS @media (max-width)

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #41629
    Taufik Nurrohman

    Why do people always add the `screen` before the device media width/height in media queries like this?

    @media screen and (max-width:770px) {
    /* something */

    Okay. I know that’s to targetting the media of screen only. But why not just do this:

    @media (max-width:770px) {
    /* some think */

    I always use it and everything was fine. And if the above code means that I would do **something** in **any media** that has a maximum width of 770 pixels, but in fact this is just working on the screen :

    Taufik Nurrohman

    @joshuanhibbert: So, this is not a bad habit?

    Andy Howells

    I was using @media handheld, only screen and (max-width) {} for ages. I have no idea why.

    One thing of note though – you may not want your responsive stuff to do something for print. So unless you’re specifying an alternative stylesheet explictly for print – the @media will cover everything.

    I just tested on one of my sites removing screen from the stylesheet media and it changed the way it prints, from basic to an attempt at the styled site.

    Taufik Nurrohman


    I have no idea why.

    I bet some people write this syntax without thinking why :D

    My CSS doesn’t change the print layout even if I add the `screen` (still printed/previewed as the styled site) sometimes. I think this is just a mistake. Btw, I’m not add the `media=screen` atribute in the `` tag.


Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.