Ich habe einen CSS-Code geschrieben, damit eine HTML-Seite besser in mobile Browser passt. Um sicherzugehen, dass mein CSS nur auf Handys zutrifft, verwende ich folgende Medienabfrage:
%Vor%Als iPhone-Entwickler habe ich auf diesem Gerät getestet und es funktioniert wirklich gut. Aber ich möchte, dass mein CSS auf allen Arten von Geräten (Android, Windows Phone, etc.) verwendet wird.
Was wäre eine gute Lösung, die für die meisten Smartphones dieser Tage passen würde? Oder brauche ich eine komplexere Medienabfrage?
Aktualisiert: Mars 2016
Projekte sind alle unterschiedlich, daher ist es schwierig, eine globale Regel festzulegen, die zu allen passt. Wenn du nach einem suchst, hier ist ein Beispiel, dass jemand, der schlauer ist als ich, und den ich schon mal benutzt habe:
%Vor%Beachten Sie die fehlenden Verweise auf Geräte, Bildschirmgrößen oder -ausrichtung auf ihre Namen. Die Größe eines 'Tablet-Porträts' sollte uns eigentlich nichts ausmachen, da wir versuchen sollten, responsive zu machen und auf jeder Bildschirmgröße gut auszusehen, nicht einfach adaptiv auf ein paar Bildschirmgrößen.
Ja, es ist wichtig, die gängigsten Bildschirmgrößen zu kennen und verrückte Medienabfragen zu vermeiden, aber am Ende könnte Ihr Design anfangen, um Anpassungen bei 530px statt 480px oder so ähnlich zu betteln. Also warum nicht?
Nun zu meinen persönlichen Vorlieben : Ich behalte die Medienanfragen immer im Blick, aber zuerst tendiere ich dazu, die Gerätegrößen fast vollständig zu ignorieren. Ich bevorzuge auch den Ansatz Desktop-first , weil ich es einfacher finde, Layouts auf kleinere Größen zu setzen (z. B .: nicht so wichtige Dinge von der Seite entfernen, Größen reduzieren usw.).
Ursprüngliche Antwort
Manche Menschen neigen dazu, Gerätegrößen vollständig zu ignorieren. Sie sagen, dass Sie überprüfen sollten, wo Ihr Layout zu brechen beginnt, und Medienanfragen nur dann erstellen, wenn dies erforderlich ist. Andere prüfen, wie Sie es gerade tun, nach verschiedenen Gerätegrößen. Aber dann haben Sie eine Medienanfrage für 320px, eine andere für 480px, und so weiter ... Sie können damit verrückt werden, und vielleicht ist es nicht einmal abhängig von Ihrem Layout notwendig!
Also, jetzt versuche ich beides zu tun. Ich neige dazu, Gerätegrößen zuerst zu ignorieren und einige Medienabfragen nur bei Bedarf zu erstellen (wenn Layout bricht), bis es für Größen wie 960px und größer, und auch für kleinere Bildschirmgrößen wie 320px (die kleinste Gerätgröße, die ich interessiere) etwa).
Kürzlich fing ich an mit Responsive Web Design und Media Queries zu arbeiten, ich fand keine einzigartige "magische" Frage, aber nachdem ich viele Artikel und ein paar Bücher gelesen hatte, habe ich den Mobile First Weg angenommen Webseiten entwickeln, und ich verwende einige gängige Media Queries, hier die Breakpoints:
(Aus Ссылка )
Ich hoffe, es hilft
Tags und Links css mobile media-queries