Query media CSS che si ignorano reciprocamente

Question

Grazie Overflow dello stack per l'assistenza. Ho alcuni css personalizzati che sto usando per rendere più rigoroso un design. Continuo a incorrere in questo problema in cui, se cambio qualcosa in una media query, dico per l'iPhone 6, che cambia poi colpisce un altro dispositivo, come l'iPhone 5. Sta diventando questo problema, sono costantemente aggiustato senza fine in vista. Ecco i miei break point @media che sto utilizzando.

/* 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) { 

} 

Qualsiasi aiuto sarebbe molto gradito.

Answer 1

Sono d'accordo con Birdman e dovresti considerare un primo approccio mobile. Il primo dispositivo mobile, tuttavia, indica che la dimensione del dispositivo più piccola è completamente al di fuori di qualsiasi query multimediale. La prossima dimensione inizierà la prima query multimediale. Hai sempre solo bisogno di una larghezza minima, in quanto questi nuovi stili saranno in aggiunta agli stili di base, senza sovrascriverli. Ogni query multimediale creata continuerà a combinarsi con quelle già chiamate.

E invece di preoccuparsi di iPad questo, o tablet che ... preoccuparsi di quando i vostri elementi di design iniziano a sembrare pessimi. Tutti i principali browser hanno emulatori abbastanza intelligenti da testare in diverse dimensioni del dispositivo.

Ecco un buon articolo sui pro e contro. Ho sempre codice mobile prima, e mai preoccuparsi di stili in collisione, a meno che non lo faccio apposta :)

https://codemyviews.com/blog/mobilefirst

Answer 2

Quando una larghezza del dispositivo rientra nell'intervallo della query del supporto, verrà applicato lo stile. Quindi se la larghezza di un dispositivo è di 500 px, avrà prima lo stile 6plus, che verrà quindi sostituito dagli stili del 6, quindi dai 5 secondi. Normalmente, non è consigliabile provare a personalizzare il tuo CSS per un dispositivo specifico, ma se lo desideri, devi assicurarti che nessuno degli intervalli si sovrapponga, altrimenti verranno semplicemente sostituiti da qualsiasi stile che si presenta per ultimo.