Vor ein paar Jahren war es relativ einfach, Websites zu entwerfen und zu erstellen. Websites waren einfacher und wurden auf Desktops und Laptops mit geringen Bildschirmgrößen angezeigt. Heute, wo mobile Geräte die Browser-Zeit übernehmen, kann eine Website auf einem 4,8-Zoll-Smartphone-Bildschirm, einem 5-Zoll-Phablet, einem 7-Zoll-Tablet oder einer beliebigen Größe dazwischen angezeigt werden.
Wie stellen Sie sicher, dass Ihre Website über Gerätetypen und Bildschirmgrößen hinweg korrekt angezeigt wird?
Die Lösung wurde zuerst vorgeschlagen von Ethan Marcotte, als er nach Möglichkeiten suchte, Webseiten-Designs ansprechend zu gestalten, dh sie sich entsprechend der Bildschirmgröße verändern lassen. Ein reaktionsschnelles Website-Design ist eines, das CSS geschickt einsetzt, um sicherzustellen, dass Webseiten in einem breiten Bereich von Bildschirmgrößen gut rendern - ohne URL-Umleitung oder dynamisches Bereitstellen von unterschiedlichem HTML- und CSS-Code abhängig vom UserAgent. Es ist nicht wirklich eine Technologie oder ein Standard, sondern eine Reihe von Designprinzipien, die helfen, das Ergebnis zu erreichen.
In den letzten Jahren sind viele responsive Templates, CSS-Frameworks und WordPress-Themes entstanden. So ist es beispielsweise möglich, eine responsive Website in WordPress zu erstellen, ohne eine einzelne Codezeile zu schreiben.
Aber ein echter Webdesigner ist nicht damit zufrieden, nur die Vorlagen zu verwenden. Sie wird sich bemühen, die Elemente des responsiven Webdesigns zu verstehen, um sie effektiv zu nutzen.
Deshalb werden wir uns heute die 3 grundlegenden Techniken ansehen, die Sie beherrschen müssen. Sie sind ein effektiver responsiver Designer.
Mit Medienabfragen können Sie unterschiedliche Layouts für verschiedene Medientypen wie Bildschirm, Druck, TV, Handheld-Geräte usw. entwerfen. Je nach Medientyp können Sie den Stil, die Schriftart und andere Elemente der Seite konfigurieren.
Die in CSS3 eingeführten Medienabfragen ermöglichen es einem Designer, die Darstellung des Inhalts an eine bestimmte Reihe von Ausgabegerätetypen anzupassen. Sie bestehen aus einer Medientypdeklaration und einem oder mehreren Medienmerkmalsausdrücken, die als wahr oder falsch ausgewertet werden.
Die Palette der Medientypen umfasst Handheld, Bildschirm, Fernsehen, Druck und Projektion. Medienmerkmale umfassen, sind aber nicht beschränkt auf Gerätehöhe, Breite, Seitenverhältnis, Auflösung, Farbindex sowie Höhe, Breite des Browserfensters.
Nehmen wir ein einfaches Beispiel; Stellen Sie sich vor, Sie möchten, dass Ihre Textgröße auf kleineren Geräten wie Telefonen verkleinert wird. Die Abfrage würde etwa so aussehen:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}Jetzt wird die Schriftgröße Ihrer Absätze auf 1em gesetzt, es sei denn, die Browserbreite ist kleiner als 400px, in diesem Fall schrumpft sie auf 0.8em.
Meiner Erfahrung nach besteht der beste Weg, ein responsives Layout zu entwerfen, darin, zuerst ein Standard-Master-Stylesheet mit den wichtigsten Strukturelementen zu erstellen. Anschließend können Sie Medienabfragen hinzufügen, um Elemente basierend auf dem Layout oder anderen Geräteelementen anzupassen. Wenn es mehr als eine Handvoll Regeln gibt, ist es möglicherweise besser, sie auf ein separates untergeordnetes Blatt zu verschieben, das Sie später selektiv laden können. So würde das funktionieren:
Dieser Codeabschnitt überprüft, ob das Gerät im Querformat mit einer Gerätebreite von weniger als 720 Pixel ein Handheld ist. Wenn dies der Fall ist, wird das Stylesheet tablet_layout.css geladen .
Beachten Sie, dass sich die Merkmale width, height, min / max-width und min / max-height auf die Breite und Höhe des Browserfensters beziehen. Die Gerätebreite und -höhe wird über die Gerätebreite, Gerätehöhe, Min- / Max-Gerätebreite, Min- / Max-Gerätehöhe gesteuert . Wenn du nachsehen möchtest Weitere Beispiele mit Medienabfragen MDN hat eine gute Zusammenfassung.
"Fließgitter" ist ein Begriff, der verwendet wird, um ein Layout zu beschreiben, das in relativen Proportionen der verschiedenen Elemente codiert ist, und nicht mit festen Pixelwerten.
Traditionelle CSS-Layouts verwendeten Gitter mit fester Breite, um die Elemente zu positionieren. Der Ansatz mit fester Breite funktioniert heute nicht mehr, da wir Gerätebildschirme von 3 Zoll bis zu einigen Fuß haben. In einem Fluid-Grid-Design wird alles in Bezug auf seinen relativen Anteil zum Basiselement codiert, dh anstatt die Höhe und Breite jedes Elements zu spezifizieren; es wird ein Prozentsatz oder eine relative Größe angegeben.
Stellen Sie sich vor, Sie haben vier Spalten. Um dies flüssig zu machen, müssen Sie, anstatt sie jeweils als 200 Pixel breit zu spezifizieren, 0,2083% angeben (dh als 200/960). Zumindest ist das das Prinzip. Die Schaffung eines vollständig fließenden Gitters erfordert viel Sorgfalt. Es ist einer dieser seltenen Fälle, die ich lieber mit benutzerdefinierten Tools empfehlen würde. Winziges flüssiges Gitter , Variable Rastersystem und Fluid-Grundlinienraster sind einige gute Alternativen, um Ihr eigenes Fluidgitter von Grund auf neu zu schreiben.
Bilder werden als flexibel angesehen, wenn das Bild in nativer Größe gerendert wird, solange der HTML-Container dies unterstützt, aber wenn das Browserfenster verkleinert wird, skaliert das Bild entsprechend.
Selbst wenn der Rest des Designs flüssig und ansprechend ist, wird es nicht gut rendern, wenn alle Komponenten nicht skalieren. Dies kann bei Bildern und Videos schwierig werden. Ein 700 Pixel breites Bild wird auf einem Desktop gut aussehen, aber auf einem 320-Pixel-Tablet abgeschnitten werden. Die meisten modernen responsiven Designs verwenden die Eigenschaft CSS max-width , um Bilder skalieren zu lassen. (Diese Methode war zuerst von Richard Butler vorgeschlagen .)
img {max-width: 100%;}Diese wenigen Zeilen stellen sicher, dass das Bild nicht abgeschnitten wird, indem die maximale Bildbreite auf 100% des Containers eingestellt wird. Wenn das Browserfenster oder der Bildschirm kleiner wird, verkleinert dieser Teil des CSS-Codes das Bild proportional. Die Höhe wird automatisch angepasst, während das Seitenverhältnis beibehalten wird.
Sie können stattdessen das Bild so sperren, dass es einen bestimmten vertikalen Bildschirmanteil einnimmt
img {max-height: 75%;}(Stellen Sie sicher, dass Sie die Eigenschaften max-height und max-width nicht zusammen verwenden.)
Die Bildgröße kann auch mit der Textgröße anstatt mit dem Elternelement wie folgt verknüpft werden:
img {width: 30em;}Wenn das Bild Text enthält, möchten Sie möglicherweise die minimale / maximale Größe begrenzen, um sicherzustellen, dass der Text lesbar ist. Sie können es so spezifizieren:
img {width: 30em;max-width: 500px;min-width: 100px;}Die gleichen Techniken können zum Skalieren von Videos verwendet werden, zum Beispiel:
.video embed, .video object, .video iframe { width: 100%; height: auto; }Responsive Design ist die Zukunft unserer Branche, aber mit so vielen verschiedenen Techniken, die herumfliegen, ist es oft schwierig mitzuhalten. Beherrschen Sie diese 3 einfachen Techniken und Sie werden 90% des Weges zum responsiven Designer finden.
Ausgewähltes Bild / Vorschaubild, elastisches Bild über Shutterstock.