Grow your CSS skills. Land your dream job.

Media Queries – Device or Desktop

  • # June 20, 2013 at 5:17 am

    I just wanted to make sure I am doing this correct, I want my device and desktop to look the same at a certain size, for example everything under 480px (mobile).

    Before retina I would do it like this, targeting desktop and device -

    @media all and (max-width: 480px) { }

    But now I do this because of retina devices, their width will become 960px so I need to use a separate device width query.

    @media all and (max-device-width: 480px), (max-width: 480px) { }

    Is this correct? I haven’t seen any examples for targeting both, I thought developers would want their site to look the same for device and desktop at a certain size.

    # June 20, 2013 at 5:20 am

    Retina is still `max-width: 480px` (for iPhone 4/4S), don’t need `max-device-width`.

    # June 20, 2013 at 5:25 am

    Whoops, sorry it was cache sending me crazy! Thanks for the reply.

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

You must be logged in to reply to this topic.

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