Grundlagen des responsiven Webdesigns
- Setzen Sie das Ansichtsfenster
- Größe des Inhalts auf das Ansichtsfenster
- Verwenden Sie CSS-Medienabfragen für die Reaktionsfähigkeit
- So wählen Sie Haltepunkte aus
- Medienabfragebruchspunkte anzeigen in Chrome DevTools
Die Verwendung mobiler Geräte zum Surfen im Internet wächst weiterhin in astronomischem Tempo, und diese Geräte sind häufig durch die Anzeigegröße eingeschränkt und erfordern einen anderen Ansatz auf dem Bildschirm.,
Responsive Web-Design, ursprünglich definiert von Ethan Marcotte in einer Liste Auseinander, reagiert auf die Bedürfnisse der Benutzer und die Geräte, die sie wieder verwenden. Das Layout ändert sich basierend auf der Größe und den Fähigkeiten des Geräts. Auf einem Telefon sehen Benutzer beispielsweise Inhalte, die in einer einzelnen Spaltenansicht angezeigt werden.Ein Tablet zeigt möglicherweise denselben Inhalt in zwei Spalten an.
Es gibt eine Vielzahl unterschiedlicher Bildschirmgrößen für Telefone,“ Phablets“, Tablets, Desktops, Spielekonsolen, Fernseher und sogar Wearables., Bildschirmgrößen ändern sich ständig, so ist es wichtig, dass Ihre Website auf jede Bildschirmgröße anpassen können, heute oder in der Zukunft. Darüber hinaus haben Geräte verschiedene Funktionen, mit denen wir mit ihnen interagieren. Zum Beispiel werden einige Ihrer Besucher einen Touchscreen verwenden. Modernes Responsive Design berücksichtigt all diese Dinge, um die Erfahrung für alle zu optimieren.
Legen Sie das Ansichtsfenster fest #
Seiten, die für eine Vielzahl von Geräten optimiert sind, müssen ein Meta-Ansichtsfenster-Tag im Kopf des Dokuments enthalten.Ein Meta-Viewport-Tag gibt dem Browser Anweisungen, wie die Seitendimensionen und Skalierung zu steuern.,
Um zu versuchen, die beste Erfahrung zu bieten, rendern mobile Browser die Seite auf einem Desktop-Bildschirm Breite (in der Regel über 980px, obwohl diese variesacross Geräte), und dann versuchen, den Inhalt besser aussehen durch increasingfont Größen und Skalierung der Inhalte auf den Bildschirm passen.Dies bedeutet, dass Schriftgrößen für Benutzer inkonsistent erscheinen können, die möglicherweise doppelt tippen oder Pinch-to-zoomin müssen, um den Inhalt zu sehen und mit ihm zu interagieren.,
Unter Verwendung des Meta-Ansichtsfensterwerts width=device-width wird die Seite angewiesen, der Breite des Bildschirms in geräteunabhängigen Pixeln zu entsprechen. Ein gerät (oder Dichte) unabhängiges Pixel ist eine Darstellung eines einzelnen Pixels, das auf einem Bildschirm mit hoher Dichte aus vielen physikalischen Pixeln bestehen kann. Auf diese Weise kann die Seite reflowcontent so anpassen, dass sie verschiedenen Bildschirmgrößen entspricht, unabhängig davon, ob sie auf einem kleinen Mobiltelefon oder einem großen Desktop-Monitor gerendert wird.,
Einige browserskeep die Seite Breite Konstante beim Drehen zu landscapemode, und Zoom statt Reflow den Bildschirm zu füllen., Das Hinzufügen des Wertsinitial-scale=1 weist Browser an, unabhängig von der Geräteausrichtung eine 1:1-Beziehung zwischen CSSpixeln und geräteunabhängigen Pixeln herzustellen, und ermöglicht es der Seite, die volle Querformat-Breite zu nutzen.
Achtung: Um sicherzustellen, dass ältere Browser die Attribute ordnungsgemäß analysieren können, verwenden Sie ein Komma, um Attribute zu trennen.,
Das hat kein <meta name="viewport"> Tag mit width oder initial-scaleLighthouse audit kann Ihnen helfen, den Prozess zu automatisieren, um sicherzustellen, dass Ihre HTML-Dokumente das Viewport Meta-Tag korrekt verwenden.,
Sicherstellen eines zugänglichen Ansichtsfensters #
Zusätzlich zum Festlegen einer initial-scalekönnen Sie im Ansichtsfenster auch die folgenden Attribute festlegen:
minimum-scalemaximum-scaleuser-scalable
Wenn festgelegt,können diese die Fähigkeit des Benutzers deaktivieren, das Ansichtsfenster zu vergrößern,was möglicherweise zu Problemen mit der Zugänglichkeit führt.Daher würden wir die Verwendung dieser Attribute nicht empfehlen.,
Größe Inhalt zum Ansichtsfenster #
Auf Desktop-und Mobilgeräten sind Benutzer es gewohnt,Websites vertikal, aber nicht horizontal zu scrollen.zwingt den Benutzer, horizontal zu scrollen oder zu zoomen, um die gesamte Seite zu sehen, führt dies zu einer schlechten Benutzererfahrung.
Wenn eine mobile Website mit einem Meta-Viewport-Tag zu entwickeln, ist es einfach, versehentlich Seiteninhalte zu erstellen, die nicht ganz innerhalb des angegebenen Viewport passen.Beispielsweise kann ein Bild, das in einer Breite angezeigt wird, die breiter als das Ansichtsfenster ist, dazu führen, dass das Ansichtsfenster horizontal gescrollt wird.,Sie sollten diesen Inhalt so anpassen,dass er in die Breite des Ansichtsfensters passt, damit der Benutzer nicht horizontal scrollen muss.
Der Inhalt ist für das Viewportlighthhouse-Audit nicht korrekt dimensioniert, sodass Sie den Prozess der Erkennung überlaufender Inhalte automatisieren können.
Bilder #
Ein Bild hat feste Abmessungen und wenn es größer als das Ansichtsfenster ist, wird eine Bildlaufleiste verursacht.Ein üblicher Weg, um mit diesem Problem umzugehen, besteht darin, allen Bildern eine max-width von 100%.,Dies führt dazu,dass das Bild verkleinert wird, um es an den Speicherplatz anzupassen, falls die Größe des Ansichtsfensters kleiner als das Bild ist.Da jedoch die max-width anstelle der width 100%, wird das Bild nicht größer als seine natürliche size.It ist im Allgemeinen sicher, Folgendes zu Ihrem Stylesheet hinzuzufügenso dass Sie nie ein Problem mit Bildern haben werden, die eine Bildlaufleiste verursachen.,
Fügen Sie die Abmessungen des Bildes dem img-Element hinzu #
Wenn Sie max-width: 100% Sie überschreiben die natürlichen Abmessungen des Bildes,sollten jedoch weiterhin die Attribute width und height für Ihre <img> tag.Dies liegt daran, dass moderne Browser diese Informationen verwenden, um Platz für das Bild zu reservieren, bevor es geladen wird, Dies wird dazu beitragen, Layout-Verschiebungen beim Laden von Inhalten zu vermeiden.,
Layout #
Da Bildschirmabmessungen und-breite in CSS-Pixeln zwischen Geräten(z. B. zwischen Telefonen und Tablets und sogar zwischen verschiedenen Telefonen) stark variieren, sollte sich der Inhalt nicht auf eine bestimmte Ansichtsfensterbreite verlassen, um gut gerendert zu werden.
In der Vergangenheit, diese erforderliche Einstellung Elemente verwendet, um Layout zu erstellen in percentages.In im folgenden Beispiel sehen Sie ein zweispaltiges Layout mit schwebenden Elementen in Pixelgröße.Sobald das Ansichtsfenster kleiner als die Gesamtbreite der Spalten wird, müssen wir horizontal scrollenum den Inhalt zu sehen.,
Durch die Verwendung von Prozentsätzen für die Breiten bleiben die Spalten immer ein bestimmter Prozentsatz des Containers.Dies bedeutet, dass die Spalten schmaler werden, anstatt eine Bildlaufleiste zu erstellen.
Moderne CSS-Layout-Techniken wie Flexbox, Grid-Layout und Multicolmake die Erstellung dieser flexiblen Gitter viel einfacher.,
Flexbox #
Diese Layoutmethode ist ideal, wenn Sie eine Reihe von Elementen unterschiedlicher Größeund Sie möchten, dass sie bequem in eine Reihe oder Reihen passen, wobei kleinere Elemente weniger Platz beanspruchen und größere mehr Platz erhalten.
In einem responsiven Design können Sie mit Flexbox Elemente als einzelne Zeile anzeigen oder in mehrere Zeilen einschließen, wenn der verfügbare Speicherplatz abnimmt.
Lesen Sie mehr über Flexbox.
CSS Grid Layout #
CSS-Grid-Layout ermöglicht die einfache Erstellung von flexiblen grids.,Wenn wir das frühere Beispiel betrachten, anstatt unsere Spalten mit Prozentsätzen zu erstellen,könnten wir das Rasterlayout und die fr – Einheit verwenden, die einen Teil des verfügbaren Speicherplatzes im Container darstellt.
Grid kann auch verwendet werden,um regelmäßige grid layouts, mit so viele elemente wie passen.Die Anzahl der verfügbaren Spuren wird als Bildschirmgröße reduziert shrinks.In in der folgenden Demo haben wir so viele Karten, wie in jede Zeile passen, mit einer Mindestgröße von 200px.,
Lesen Sie mehr über CSS Grid Layout
Mehrspaltiges Layout #
Für einige Layouttypen können Sie das mehrspaltige Layout (Multicol) verwenden, mit dem eine große Anzahl von Spalten mit der column-width property.In in der folgenden Demo können Sie sehen, dass Spalten hinzugefügt werden, wenn Platz für eine andere200px Spalte ist.,
Lesen Sie mehr über Multicol
Verwenden Sie CSS-Medienabfragen für die Reaktionsfähigkeit #
Manchmal müssen Sie umfangreichere Änderungen an Ihrem Layout vornehmen Unterstützen Sie eine bestimmte Bildschirmgröße als die oben gezeigten Techniken.Hier werden Medienabfragen nützlich.
Medienabfragen sind einfache Filter, die auf CSS-Stile angewendet werden können.,Sie erleichtern das Ändern von Stilen basierend auf den Gerätetypen,die den Inhalt rendern, oder den Funktionen dieses Geräts, z. B. Breite, Höhe, Ausrichtung,Schwebefähigkeit und ob das Gerät als Touchscreen verwendet wird.,
Um verschiedene Stile für den Druck bereitzustellen,müssen Sie auf einen Ausgabetyp abzielen, damit Sie ein Stylesheet mit Druckstilen wie folgt einfügen können:
Alternativ können Sie Druckstile mithilfe einer Medienabfrage in Ihr Hauptstylesheet aufnehmen:
Es ist auch möglich, separate Stylesheets in Ihre Haupt-CSS-Datei aufzunehmen, indem Sie die
syntax, @import url(print.css) print;, diese Verwendung wird jedoch aus Leistungsgründen nicht empfohlen.Siehe Vermeiden Sie CSS-Importe für weitere Details.,
Für responsives Webdesign fragen wir normalerweise die Funktionen des Geräts ab, um ein anderes Layout für kleinere Bildschirme bereitzustellen, oder wenn wir feststellen, dass unser Besucher einen Touchscreen verwendet.
Media Abfragen basierend auf viewport-Größe #
Media queries ermöglichen uns zu schaffen eine ansprechende experiencewhere-styles sind angewendet zu kleinen Bildschirmen, großen Bildschirmen, und überall in zwischen.Die Funktion, die wir hier erkennen, ist daher Bildschirmgröße, und wir können für die folgenden Dinge testen.,
-
width(min-width,max-width) -
height(min-height,max-height) orientationaspect-ratio
All of these features have excellent browser support,for more details including browser support information seewidth,height,orientation, andaspect-ratio on MDN.
The specification did include tests for device-width and device-height., Diese sind veraltet und sollten vermieden werden.device-width und device-height wurden auf die tatsächliche Größe des Gerätefensters getestet,was in der Praxis nicht nützlich war, da dies von dem Ansichtsfenster abweichen kann, das der Benutzer betrachtet, z. B. wenn die Größe des Browserfensters geändert wurde.
Media Abfragen basierend auf Gerätefunktionen #
Angesichts der Vielfalt der verfügbaren Geräte, wir können nicht die Annahme, dass jeder große Gerät ist eine regelmäßige desktopor laptop-computer, oder dass die Menschen sind nur mit einem touchscreen auf einem kleinen Gerät.,Mit einigen neueren Ergänzungen der Media Queries specificationwir können auf Funktionen wie den Zeigertyp testen, der für die Interaktion mit dem Gerät verwendet wird, und ob der Benutzer den Mauszeiger über Elemente bewegen kann.
hoverpointerany-hoverany-pointer
Versuchen Sie, diese demo, die auf verschiedenen Geräten,wie einen normalen desktop-computer und ein Telefon oder tablet.
Diese neueren Funktionen haben eine gute Unterstützung in allen modernen Browsern., Erfahren Sie mehr auf den MDN-Seiten fürhover, any-Hover, pointer, any-Pointer.
Verwenden von any-hover und any-pointer #
Die Funktionen any-hover und any-pointer Testen Sie, ob der Benutzer die Fähigkeit hatzu schweben, oder verwenden Sie diesen Zeigertyp, auch wenn dies nicht die primäre Art ist, wie sie mit device.Be sehr vorsichtig bei der Verwendung dieser.Einen Benutzer zu zwingen, zu einer Maus zu wechseln, wenn er seinen Touchscreen verwendet, ist nicht sehr freundlich!,any-hover und any-pointer können jedoch nützlich sein, wenn es wichtig ist, herauszufinden, über welche Art von Gerät ein Benutzer verfügt.Zum Beispiel sollte ein Laptop mit Touchscreen und Trackpad neben der Möglichkeit,zu schweben, grobe und feine Zeiger enthalten.
So wählen Sie Haltepunkte #
Definieren Sie Haltepunkte nicht basierend auf Geräteklassen.Das Definieren von Haltepunkten basierend auf bestimmten Geräten, Produkten,Markennamen oder Betriebssystemen, die heute verwendet werden, kann zu einem Albtraum für die Wartung führen.,Stattdessen sollte der Inhalt selbst bestimmen, wie sich das Layout an seinen Container anpasst.
Wählen Sie wichtige Haltepunkte aus, indem Sie klein beginnen, dann arbeiten #
Entwerfen Sie den Inhalt so,dass er zuerst auf eine kleine Bildschirmgröße passt, und erweitern Sie dann den Bildschirm, bis ein Haltepunkt erforderlich wird.Auf diese Weise können Sie Haltepunkte basierend auf Inhalten optimierenund die geringstmögliche Anzahl von Haltepunkten beibehalten.
Lassen Sie uns das Beispiel durcharbeiten, das wir am Anfang gesehen haben: die Wettervorhersage.Der erste Schritt besteht darin, die Prognose auf einem kleinen Bildschirm gut aussehen zu lassen.,
Ändern Sie als nächstes die Größe des Browsers, bis zwischen den Elementen zu viel Leerraum vorhanden ist und die Prognose einfach nicht so gut aussieht.Die Entscheidung ist etwas subjektiv, aber über 600px ist sicherlich zu breit.
Um einen Haltepunkt am 600px einzufügen, erstellen Sie am Ende Ihres CSS zwei Medienabfragen für die Komponente,eine, die verwendet werden soll, wenn der Browser 600px und darunter ist, und eine, wenn sie breiter als 600pxist.
Schließlich, gestalten Sie das CSS. Fügen Sie in der Medienabfrage für eine max-width von 600pxdas CSS hinzu,das nur für kleine Bildschirme gilt., Innerhalb der Medienabfrage nach einermin-width von 601px fügen Sie CSS für größere Bildschirme hinzu.
Wählen Sie bei Bedarf kleinere Haltepunkte #
Neben der Auswahl größerer Haltepunkte bei wesentlichen Layoutänderungen ist es auch hilfreich, kleinere Änderungen anzupassen.Zwischen wichtigen Haltepunkten kann es beispielsweise hilfreich sein,die Ränder oder das Auffüllen eines Elements anzupassen oder die Schriftgröße zu erhöhen, damit es sich im Layout natürlicher anfühlt.
Beginnen wir mit der Optimierung des kleinen Bildschirmlayouts.,In diesem Fall erhöhen wir die Schriftart, wenn die Breite des Ansichtsfensters größer als 360pxist.Zweitens, wenn es genügend Platz,wir können die hohen und niedrigen Temperaturen trennen, so dass sie auf der gleichen Linie re anstelle von übereinander.Und lassen Sie uns auch die Wettersymbole etwas größer machen.
In ähnlicher Weise ist es für die großen Bildschirme am besten, die maximale Breite des forecast panelso zu begrenzen es nicht die gesamte Bildschirmbreite verbrauchen.,
Text zum Lesen optimieren #
Die klassische Lesbarkeitstheorie legt nahe, dass eine ideale Spalte 70 bis 80 Zeichen pro Zeile enthalten sollte(etwa 8 bis 10 Wörter in Englisch).Daher sollten Sie jedes Mal,wenn die Breite eines Textblocks über 10 Wörter hinauswächst, einen Haltepunkt hinzufügen.
Werfen wir einen tieferen Blick auf das obige Blog-Post-Beispiel.Auf kleineren Bildschirmen funktioniert die Roboto-Schriftart bei 1em perfekt und gibt 10 Wörter pro Zeile,aber größere Bildschirme erfordern eine breakpoint.In wenn in diesem Fall die Browserbreite größer als 575px ist, ist die ideale Inhaltsbreite 550px.,
Vermeiden Sie es, Inhalte einfach auszublenden #
Seien Sie vorsichtig, wenn Sie auswählen, welcher Inhalt je nach Bildschirmgröße ausgeblendet oder angezeigt werden soll.Don “ t einfach Inhalte verstecken, nur weil Sie es auf dem Bildschirm passen.Die Bildschirmgröße ist kein endgültiger Hinweis darauf, was ein Benutzer möchte.Zum Beispiel könnte die Eliminierung der Pollenzahl aus der Wettervorhersage ein ernstes Problem für Frühlingsallergiker sein, die die Informationen benötigenzu bestimmen, ob sie nach draußen gehen können oder nicht.,
View Media query Breakpoints in Chrome DevTools #
Sobald Sie Ihre Media Query Breakpoints eingerichtet haben,möchten Sie sehen, wie Ihre Website mit ihnen aussieht.Sie können die Größe Ihres Browserfensters ändern,um die Haltepunkte auszulösen, aber Chrome DevTools verfügt über eine integrierte Funktion, mit der Sie leicht erkennen können, wie eine Seite unter verschiedenen Haltepunkten aussieht.
Um Ihre Seite unter verschiedenen Haltepunkten anzuzeigen:
Öffnen Sie DevToolsund schalten Sie dann den Gerätemodus ein.Dies wird standardmäßig im Responsive-Modus geöffnet.
Um Ihre Medienabfragen anzuzeigen, öffnen Sie das Menü Gerätemodus und wählen Sie Medien quer anzeigen um Ihre Haltepunkte als farbige Balken über Ihrer Seite anzuzeigen.
Klicken Sie auf eine der Balken, um Ihre Seite anzuzeigen, während diese Medienabfrage aktiv ist.,Klicken Sie mit der rechten Maustaste auf eine Leiste, um zur Definition der Medienabfrage zu springen.