Grow your CSS skills. Land your dream job.

@media (max-width)

  • # December 27, 2012 at 8:19 pm

    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 :

    # December 27, 2012 at 10:22 pm

    I do what you do, and very rarely use ‘screen’.

    # December 28, 2012 at 9:46 am

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

    # December 28, 2012 at 10:03 am

    I agree I think it’s better to just say default all instead.

    # December 28, 2012 at 6:09 pm

    @Hompimpa Nope. You would only explicitly state ‘screen’ if that was what you wanted to target.

    # December 28, 2012 at 7:00 pm

    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.

    # December 29, 2012 at 1:55 am

    @andy_unleash

    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.

    Whateverrrr…

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".