Danke Stack Overflow für die Hilfe. Ich habe ein benutzerdefiniertes CSS, das ich verwende, um ein Design zu straffen. Ich stoße immer wieder auf dieses Problem, bei dem, wenn ich etwas in einer Medienabfrage ändere, beispielsweise für das iPhone 6, diese Änderung dann ein anderes Gerät betrifft, beispielsweise das iPhone 5. Es wird zu diesem Problem, bei dem ich mich ständig anpasse, ohne dass ein Ende in Sicht ist. Hier sind meine @media Haltepunkte, 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 appricated.
Ich stimme Birdman zu, und Sie sollten einen mobilen ersten Ansatz in Betracht ziehen. Mobile first bedeutet aber, dass die kleinste Gerätegröße komplett ausserhalb jeglicher Medienabfrage steht. Die nächsthöhere Größe startet die erste Medienabfrage. Sie benötigen immer nur eine Mindestbreite, da diese neuen Stile zusätzlich zu den Basisstilen vorhanden sind und diese nicht überschreiben. Jede erstellte Medienabfrage wird weiterhin mit den bereits aufgerufenen kombiniert.
Und anstatt sich Sorgen um das iPad oder das Tablet zu machen, machen Sie sich Gedanken darüber, wann Ihre Designelemente anfangen, schlecht auszusehen. Alle großen Browser verfügen über Emulatoren, die intelligent genug sind, um sie in verschiedenen Gerätegrößen zu testen.
Hier ist ein guter Artikel über die Vor- und Nachteile. Ich codiere immer zuerst mobil und mache mir nie Sorgen, dass Stile kollidieren, es sei denn, ich mache es absichtlich 🙂
Wenn eine Gerätebreite in den Bereich der Medienabfrage fällt, wird das Styling angewendet. Wenn also die Breite eines Geräts 500 Pixel beträgt, hat es zuerst das 6plus-Styling, das dann vom 6er-Styling und dann vom 5er-Styling überschrieben wird. Normalerweise wird es nicht empfohlen, zu versuchen, Ihr CSS für ein bestimmtes Gerät anzupassen, aber wenn Sie dies möchten, müssen Sie sicherstellen, dass sich keiner der Bereiche überschneidet, oder sie werden einfach durch das zuletzt kommende Design überschrieben.
Danke @birdman. Wenn dies der Fall ist und es mir nur um Hochformatansichten geht, könnte ich max-device-width entfernen, um die Überlappung zu vermeiden. Ich weiß, dass ich gelesen habe, wo ich mich auf Haltepunkte konzentrieren sollte, nicht auf Geräte, aber ich muss das noch erfolgreich erreichen. Nochmals vielen Dank für jeden Einblick oder Rat.
– robwri32
23. November 2015 um 18:17 Uhr
Wenn Sie nur die Mindestbreite verwenden möchten, stellen Sie sicher, dass Sie in aufsteigender Reihenfolge vorgehen. Beginnen Sie mit den 5ern und steigen Sie auf die 6plus auf. Dadurch wird verhindert, dass sie überschrieben werden.
– MikeBird
23. November 2015 um 19:16 Uhr
13933400cookie-checkCSS-Medienabfragen überschreiben sich gegenseitigyes
