Wie man eine Handy-freundliche Website Responsive Design in CSS ()
Mit Media Queries und Ansichtsfenster für ein mobiles taugliches Design
Sich anpassendes Webdesign
In Responsive Design, werden wir die gleiche Webseite, die Desktop- oder Laptop-Computer-Nutzer sehen auf Ihr mobiles Publikum präsentieren. Nur der Cascading Style Sheets oder CSS, wird anders sein. Das heißt, Browser auf Desktop / Laptop-Computern werden die Seite mit einem Satz von CSS-Anweisungen, während die auf Mobiltelefone noch machen.
Diese Methode der Arbeit spart Ihnen nicht nur die Arbeit des einen anderen Satz von Seiten für jede Art von Benutzer zu schaffen, sondern auch den Aufwand für diese zwei Sätze über die Jahre beibehalten wird, zu versuchen, sie synchron zu halten.
Die Überwindung der Defaults des Mobile Device: Ansichtsfenster
Da dieser Standard vorzuzutäuschen, dass das Gerät eine Breite von 980 Pixeln und Inhalte automatisch skaliert unseren Versuch besiegt, um manuell eine angenehme Erfahrung für mobile Anwender zu erstellen, haben wir es außer Kraft zu setzen, bevor wir sinnvoll alles tun können. Dazu fügen Sie den folgenden HTML-Tag der
Abschnitt Ihrer Webseite:Der Ansichtsfenster-Meta-Tag oben weist den Browser mit der tatsächlichen Gerätebreite mit einem Skalierungsfaktor von 1 zu verwenden, das heißt, es nicht zu tun, ist, dass es eine andere Breite hat, noch ist es, den Inhalt zu skalieren, so dass sie paßt in den bestehenden Fenster. Alles verwendet werden soll, wie sie ist. Dieser Befehl macht mobiler Browser verhält sich genau wie ihr Desktop-Pendant.
Der Schlüssel, der ein Responsive Design in CSS Unlocks: Media Queries
Um das zu erreichen Magie wie diese, brauchen wir eine Möglichkeit, die Bildschirmgröße zu erkennen. Moderne Browser bieten diese Möglichkeit in Form einer „Medienabfrage“.
Eine Medienabfrage in einem Stylesheet sieht ungefähr so aus:
/ * Code, der hier ist, wird auf jede Bildschirmgröße gelten * /
Beachten Sie, dass die oben ist nur ein Beispiel soll die Verwendung von mehreren Blöcken von Medienanfragen illustrieren. Meine Wahl der Zahlen verwendet es beliebig ist, so verbringen keine Zeit über sie rätselhaft.
Sie können auch Ihre Medienanfragen in der PUT Element selbst, so dass eine gesamte Sheet nur angelegt wird, wenn diese bestimmte Gruppe von Bedingungen erfüllt ist. Zum Beispiel im Anschluss an den Lasten 3-Stylesheets, ein angeblich für mobile Geräte im Portrait-Modus, ein andere für ihren Landscape-Modus, und die letzten für Desktop- und Laptop-Computer.
So können Sie sauber Ihr Code für verschiedene Bildschirmauflösungen in verschiedene Dateien trennen, wenn das ist, was Sie wollen. Wieder einmal ist zu beachten, dass der Punkt des obigen Beispiels ist die Verwendung von Medien-Anfragen zu demonstrieren Tags. Die Zahlen werden willkürlich ausgewählt.
Testing für Hoch- und Querformat mit Media Queries
„: Hochformat“ und stattdessen bestimmte Auflösungen verwenden, um herauszufinden, ob ein Gerät im Hoch- oder Querformat ist, können Sie auch die Bedingung verwenden „Orientierung: Landschaft“.
Ich neige dazu, diese nicht zu verwenden, da ich finde, dass die Anzahl der Pixel nützlicher als nur herauszufinden, um die Ausrichtung des Gerätes zu kennen. Aber die Anlage ist verfügbar, wenn Sie es verwenden müssen.
Weitere nützliche Funktionen in Media Queries
Abgesehen von den oben, können Sie auch Tests einsetzen für min-height. maximale Höhe. Breite und Höhe.
Darüber hinaus können Sie die Medienabfrage mit „nur“, wie im folgenden Ausschnitt starten:
Sehr alter Browser, die denkt nicht über die moderne Medien-Anfragen Syntax verstehen, dass „nur“ eine Art von Gerät ist (wie „Bildschirm“ oder „Drucken“ oder „Sprache“). Und da sie denken, dass die Regeln in dem Block sind für Geräte gedacht als „nur“, werden sie sie nicht folgen. Moderner Browser, auf der anderen Seite, ignoriert das Wort „nur“ (mit Absicht), so dass dieser bedingte Test ist nützlich, wenn Sie hüten müssen alter Browser Ihre Mobil nur Regeln Parsen und sie auch auf einem Desktop-Computer anwenden.
Wenn Sie CSS verwenden für alle Situationen wollen, außer wenn bestimmte Bedingungen erfüllt sind, können Sie „nicht“ vor Ihrem Zustand, wie im folgenden Beispiel verwenden.
(Beachten Sie, dass, da ich nicht „Bildschirm“ im Beispiel oben angegeben haben, es bedeutet „alles“, was bedeutet, dass alle Geräte.)
Seien Sie gewarnt, „nicht“ ist wie „nur“ in sehr alten Browsern behandelt. Das heißt, es wird als ein Gerätetyp interpretiert und daher das Stylesheet in dem Block, die nicht angewendet werden soll folgt sein.
Mobile Bildschirmauflösungen / Breiten
Hier ist eine Liste der Browser-Rasterweiten von einigen häufig verwendeten mobilen Geräten. Die Liste ist nicht erschöpfend, da neue Marken und Modelle der ganze Zeit freigegeben werden. Allerdings ist die Liste genug, um Ihnen eine Vorstellung von den Arten Größen zu geben, die Sie empfangen müssen.
- 240 Pixel (old Android Porträt-Modus)
- 320 Pixel (iPhone 3 bis 5 und iPhone SE Porträt-Modus)
- 375 Pixel (iPhone 6 und 7 Portrait)
- 384 Pixel (Android Nexus Hochformat)
- 414 Pixel (iPhone 6 Plus und 7 Plus-Hochformat)
- 480 Pixel (iPhone 3 und 4 Querformat)
- 568 Pixel (iPhone 5 Landschaft)
- 600 Pixel (Android Nexus Landschaft, anzündet Portrait)
- 667 Pixel (iPhone 6 und 7 Querformat)
- 736 Pixel (iPhone 6 Plus und 7 Plus-Landschaft)
- 768 Pixel (IPAD Hochformat)
- 1024 Pixel (IPAD Landschaft)
Kompatibilität mit Web-Browser
Die Medien-Anfragen Einrichtung, die uns für die Bildschirmgröße zu testen erlaubt ist ein Nachzügler auf die Web-Browser-Szene. Das heißt, hatte CSS schon seit Jahren existierte, bevor die Standard-Mittel enthalten bedingt bestimmte Regeln auf bestimmte Bildschirmgrößen gelten. Als solche sehr alte Browser unterstützen diese Funktionen nicht.
Auf dem Desktop / Laptop-Browser Front, Unterstützung mit IE 9, Firefox 3.5, Safari 4 und Chrome 4. Microsoft Edge, begonnen zu haben scheint, da es ursprünglich auf IE 11 Code basiert, hatte Medien-Anfragen immer Unterstützung.
Nächstes Kapitel
Es wird, wie auf der Seite erscheinen: