Consultas de medios CSS que se anulan entre sí

3 minutos de lectura

avatar de usuario
robwri32

Gracias Stack Overflow por ayudar. Tengo algunos CSS personalizados que estoy usando para ajustar un diseño. Sigo encontrando este problema en el que si cambio algo en una consulta de medios, por ejemplo, para el iPhone 6, ese cambio afecta a otro dispositivo, por ejemplo, el iPhone 5. Se está convirtiendo en este problema en el que me estoy ajustando constantemente sin un final a la vista. Aquí están mis puntos de quiebre de @media que estoy usando.

/* IPHONE 6 PLUS */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 

}

/* IPHONE 6 */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px)
and (orientation : portrait) { 

}
/* IPHONE 5s */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {

}

/* IPAD LAYOUTS */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
     } 


/* IPAD LANDSCAPE */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

Cualquier ayuda será muy apreciada.

Estoy de acuerdo con Birdman, y debería considerar un primer enfoque móvil. Móvil primero, sin embargo, significa que el tamaño más pequeño del dispositivo está completamente fuera de cualquier consulta de medios. El siguiente tamaño superior iniciará la primera consulta de medios. Solo necesita un ancho mínimo, ya que estos nuevos estilos se sumarán a los estilos base, no los sobrescribirán. Cada consulta de medios creada continuará combinándose con las ya llamadas.

Y en lugar de preocuparte por iPad esto o tableta aquello… preocúpate de cuando tus elementos de diseño comiencen a verse mal. Todos los principales navegadores tienen emuladores lo suficientemente inteligentes como para probar en diferentes tamaños de dispositivos.

Aquí hay un buen artículo sobre los pros y los contras. Siempre codifico el móvil primero, y nunca me preocupo por la colisión de estilos, a menos que lo haga a propósito 🙂

https://codemyviews.com/blog/mobilefirst

Cuando el ancho de un dispositivo se encuentra entre el rango de la consulta de medios, se aplicará el estilo. Entonces, si el ancho de un dispositivo es de 500 px, primero tendrá el estilo 6plus, que luego será anulado por el estilo 6 y luego el 5s. Normalmente, no se recomienda tratar de adaptar su CSS para un dispositivo específico, pero si lo desea, deberá asegurarse de que ninguno de los rangos se superponga, o simplemente serán anulados por el estilo que ocurra en último lugar.

  • Gracias @birdman. Si ese es el caso y solo me preocupan las vistas verticales, ¿podría eliminar el ancho máximo del dispositivo para evitar la superposición? Sé que he leído dónde debo centrarme en los puntos de interrupción, no en los dispositivos, pero aún tengo que lograrlo con éxito. Una vez más, gracias por cualquier idea o consejo.

    – robwri32

    23 de noviembre de 2015 a las 18:17

  • Si solo desea usar el ancho mínimo, asegúrese de hacerlo en orden ascendente. Comience con el 5s y avance hasta el 6plus. Esto evitará que se anulen.

    – MikeBird

    23 de noviembre de 2015 a las 19:16

¿Ha sido útil esta solución?