Consultas de medios CSS que se anulan entre sí

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.