Media Queries: check min-height and min-width?

Question

I am trying to change CSS on my page based on the min-height and min-width of the browser, so I am using this:

@media (min-height: 500px), (min-width: 580px) {
   /* CSS stuff */
}

But for some reason, this doesn't work. I can check for min-height and max-width (or vice versa) or for max-height and max-width at the same time, but checking for both min values doesn't seem to work.

I should specify this more: I want the browser to act if a min-height or a min-width becomes true. Using the and-operator will only work if both criteria are true.

Am I doing something wrong?

Answer 1

Use and instead of a comma, like this:

@media (min-height: 500px) and (min-width: 580px) {
    /* CSS stuff */
}

Answer 2

Have you added following meta tag in :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Here is REf : http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

After that use your media Query :

@media (min-height: 500px) and (min-width: 580px) {
    /* CSS stuff */
}

For media query details you can more info from http://stephen.io/mediaqueries/ for all iOS devices. If you have any other query let me know. Even you can get better idea from here http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

Answer 3

Use media query one inside other:

@media  screen and  (min-height: 40px)  {
   @media  screen and  (min-width: 50px)  {
    /*enter css here to apply for both condition*/
   }
}