CSS Media Abfragen überschreiben einander

Question

Danke Stack Overflow für die Hilfe. Ich habe einige benutzerdefinierte CSS, die ich verwende, um ein Design zu straffen. Ich laufe weiter in dieses Problem, wo, wenn ich etwas in einer Medienabfrage für das iPhone 6 ändern, diese Änderung dann ein anderes Gerät betrifft, sagen Sie das iPhone 5. Es zu diesem Thema wurde ich bin ständig anpassen ohne Ende in Sicht. Hier sind meine @media Breakpoints, die ich verwende.

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

} 

Jede Hilfe wäre sehr geschätzt.

Answer 1

Ich stimme Birdman zu, und Sie sollten einen mobilen ersten Ansatz in Betracht ziehen. Mobile zuerst bedeutet jedoch, dass die kleinste Gerätegröße vollständig außerhalb jeder Medienabfrage liegt. Die nächste Größe wird die erste Medienabfrage starten. Sie benötigen immer nur eine Mindestbreite, da diese neuen Stile zusätzlich zu den Basisstilen hinzugefügt werden und sie nicht überschreiben. Jede erstellte Medienabfrage wird weiterhin mit den bereits aufgerufenen Medienabfragen kombiniert.

Und anstatt sich Sorgen über das iPad oder dieses Tablet zu machen ... machen Sie sich Sorgen, wenn Ihre Designelemente schlecht aussehen. Alle gängigen Browser verfügen über genügend intelligente Emulatoren, um sie in verschiedenen Größen zu testen.

Hier ist ein guter Artikel über die Vor- und Nachteile. I-Code Handy immer an erster Stelle, und nie über Stile Sorge zu kollidieren, wenn ich es absichtlich tun :)

https://codemyviews.com/blog/mobilefirst

Answer 2

Wenn eine Gerätebreite zwischen den Bereich der Medienabfrage fällt, wird das Styling angewendet. Wenn also die Breite eines Geräts 500px beträgt, wird es zuerst das 6plus-Styling haben, das dann durch das 6er-Styling überschrieben wird, dann das 5s-Styling. Normalerweise empfiehlt es sich nicht, das CSS für ein bestimmtes Gerät anzupassen, aber wenn Sie möchten, müssen Sie sicherstellen, dass sich keiner der Bereiche überschneidet, oder sie werden nur vom letzten Styling überschrieben.