Medien-Abfrage, um den Gegner die meisten smartphone
Schrieb ich einige CSS-code, um eine HTML-Seite, die passen besser in den mobilen Browser. Um sicher zu sein, dass mein CSS gelten nur auf dem Handy, ich nutze folgende media query :
@media only screen and (max-device-width: 480px)
Als ein iPhone-Entwickler, getestet habe ich auf diesem Gerät und es funktioniert wirklich gut. Aber ich will mein CSS zu verwenden auf allen Geräten (Android, Windows Phone, etc).
Was wäre eine gute Auflösung, dass wäre passend für die meisten Smartphones in diesen Tagen? Oder brauche ich eine komplexere media query?
- Geh mal auf die Auflösungen zur Verfügung, die hier (Klick mich)
- Finden Sie diese Antwort für etwas ähnliches: stackoverflow.com/a/7354648/1861603
- Dies ist ein wirklich gutes tool! Danke.
- Danke für den link. Ich sah diese Frage, aber ich habe das Gefühl, dass die Antworten mehr iPhone orientiert, und nicht genug smartphone orientiert. Ich entwickeln in der Regel nur für das iPhone, aber dieses mal nicht.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Aktualisiert: Mars 2016
Projekte sind alle unterschiedlich, so dass es schwer zu legen Sie eine Globale Regel, die passen alle. Wenn Sie für einen suchen, hier ist ein Beispiel, dass jemand schlauer als ich kam und das ich benutzt habe, bevor:
Beachten Sie das fehlen von Referenzen zu - Geräte, Bildschirm-Größen oder die Ausrichtung auf Ihre Namen. Die Größe eines "tablet-portrait' sollte nicht wirklich wichtig für uns, wie wir sollten versuchen, die Dinge reaktionsschnell Weg und sehen gut aus auf jede Bildschirmgröße, nicht einfach adaptive ein paar screen-Größen.
Ja, es ist wichtig zu wissen, die häufigsten Bildschirmgrößen und vermeiden verrückt media queries, aber am Ende, Ihr design beginnen können, um Anpassungen auf 530px anstelle von 480px oder so ähnlich. Also, warum nicht?
Nun, auf meinem persönlichen Vorlieben: ich halte media queries im Hinterkopf die ganze Zeit, aber auf den ersten ich neigen dazu, zu ignorieren Gerät Größen fast völlig. Ich bevorzuge auch die desktop-ersten Ansatz, denn ich finde es einfacher, passen Sie layouts an kleineren Größen (zB.: entfernen von nicht so wichtigen Dinge von der Seite, Reduzierung Größen, etc.).
Ursprüngliche Antwort
Einige Menschen neigen dazu zu ignorieren, Gerät Größen vollständig. Sie sagen, sollten Sie schauen, wo Sie Ihr layout beginnt zu brechen und erstellen von media queries, die nur bei Bedarf. Andere check für verschiedene Geräte-Größen, wie Sie jetzt tun. Aber dann müssen Sie eine media query für 320px, eine für die 480px, und so weiter... Sie können gehen verrückt, und vielleicht ist es nicht einmal notwendig, je nach Ihrem layout!
So, jetzt versuche ich, beides zu tun. Ich neigen dazu, zu ignorieren gerätegrößen auf den ersten und wird einige media queries, die nur bei Bedarf (wenn das layout bricht), bis es sieht gut aus für Größen wie 960px und größer, und auch für kleinere Bildschirmgrößen, wie 320px (die kleinste device-Größe I care about).
Neulich habe ich angefangen zu arbeiten mit Responsive Web Design und Media Queries, die ich nicht finden Sie einen einzigartigen "magic" - Abfrage, aber nach der Lektüre eine Menge von Artikeln und ein paar Bücher habe ich angenommen das Mobile Erster Art zu entwickeln, web-Seiten, und ich bin mit einigen gängigen Medien Abfragen, hier die Haltepunkte:
(Entnommen aus http://fluidbaselinegrid.com/)
Hoffe es hilft