html - only - Consultas de medios: ¿comprobar min-height y min-width?

min-height y max-height

Question

Estoy intentando cambiar CSS en mi página en función de la altura mínima y la anchura mínima del navegador, así que estoy usando esto:

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

Pero por alguna razón, esto no funciona. Puedo verificar la altura mínima y la anchura máxima (o viceversa) o la altura máxima y la anchura máxima al mismo tiempo, pero la verificación de ambos valores mínimos no parece funcionar.

Debería especificar esto más: quiero que el navegador actúe si una altura mínima o una anchura mínima se vuelve verdadera. El uso del operador and solo funcionará si ambos criterios son verdaderos.

¿Estoy haciendo algo mal?

Answer 1

¿Has añadido la siguiente etiqueta meta en:

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

Aquí está REf: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

Después de eso use su consulta de medios:

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

Para detalles de consulta de medios, puede obtener más información en http://stephen.io/mediaqueries/ para todos los dispositivos iOS. Si usted tiene alguna otra consulta, hágamelo saber. Incluso puedes tener una mejor idea desde aquí http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

Answer 2

Usa and lugar de una coma, así:

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

Answer 3

Utilice los medios de consulta uno dentro de otro:

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