Question

I have seen many sites that are responsive both on desktop browsers and mobile phone browsers, I am working on a site and I have the following stylesheet setup: (The Hicks Design website is a good example of what I want to achieve if you need one)

/* Normal styles go here */

@media screen and (min-device-width:321px)
{
    /* Styles */
}
@media screen and (min-width:701px)
{
    /* Styles */
}
@media screen and (min-width:1025px)
{
    /* Styles */
}
@media screen and (min-width:2049px)
{
    /* Styles */
}

However my stylesheet above only seems to work on desktop browsers. (tested with Android Firefox and the default Android browser on a Sony Xperia Ray)

The Hicks design site’s rules are very similar to mine, however they make use of min and max but either for me doesn’t seem to work on both mobile and desktop browsers. (I plan on optimizing my media queries more I am just trying to get the basics to function as I want them to at the moment).

If I use max-device-width instead of max-width it becomes responsive on mobile browsers, but not desktop browsers…

I have tried the following following to get around the issue:

@media screen and (max-width:480px), screen and (max-device-width:480px)
{
    /* Styles */
}

also:

@media screen and (max-width:480px), and (max-device-width:480px)
{
    /* Styles */
}

However I don’t think either of these are correct as the web developer toolbar for Firefox complains about it. I have also tried a few variations on the above rules but still can’t get it to work.

From what I understand max-width reads the viewport width (say.. .the width of the browser window) and max-device-width reads the actual width of the screen you are using to view the site. – I’m confused why max-width doesn’t seem to read the mobile’s browser width.

I think I’m possibly missing something obvious about media queries here… It doesn’t seem to make sense that if I want my site responsive on desktop and mobile browsers I must make a copy of all of my media queries and just change the query from ‘screen and (max-width)’ to ‘screen and (max-device-width)’ or vice versa. (which I’m ashamed to even type as a workaround here)

How can I combine the (max-width) and (max-device-width) rules or how can I achieve this?

If you’d rather not read all of the above:

I am using @media screen and (max-width:480px) however it seems only @media screen and (max-device-width:480px) works on mobiles. How can I combine both of these rules to achieve a responsive design on mobile and desktop browsers?

Answer 1

There are a lot of medias out there, and if you want to select only by its properties, use the all keyword:

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

Edit:

Combine rules with or:

@media all and (prop1:val1), all and (prop2:val2)
{
    /* Styles */
}

Combine rules with and:

@media all and (prop1:val1) and (prop2:val2)
{
    /* Styles */
}