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.
%Vor%Jede Hilfe wäre sehr geschätzt.
Ich stimme Birdman zu, und Sie sollten einen ersten mobilen 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 um das iPad zu machen, oder um das Tablet ... machen Sie sich Sorgen, wenn Ihre Design-Elemente anfangen, schlecht auszusehen. Alle großen 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. Ich kodiere immer zuerst Handy und sorge mich nicht über kollidierende Styles, es sei denn, ich mache es absichtlich:)
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.
Tags und Links html css iphone responsive-design wordpress