So entwerfen und erstellen Sie adaptive Webseiten

Mit der Verbreitung von 3G nutzen immer mehr Menschen Mobiltelefone für den Internetzugang.

Mobilgeräte überholen Desktop-Geräte als am häufigsten genutztes Endgerät für den Internetzugang. Daher stehen Webdesigner vor einem schwierigen Problem: Wie können sie die gleiche Webseite auf Geräten unterschiedlicher Größe darstellen?

Der Bildschirm eines Mobiltelefons ist relativ klein und hat normalerweise eine Breite von weniger als 600 Pixeln. Die Bildschirmbreite eines PCs liegt im Allgemeinen über 1000 Pixeln (die derzeit gängige Breite beträgt 1366 × 768) und einige erreichen sogar 2000 Pixel. Es ist nicht einfach, dieselben Inhalte auf Bildschirmen unterschiedlicher Größe zufriedenstellend darzustellen.

Die Lösung für viele Websites besteht darin, unterschiedliche Webseiten für unterschiedliche Geräte bereitzustellen, beispielsweise eine mobile Version oder eine iPhone-/iPad-Version. Dies stellt sicherlich den Effekt sicher, ist jedoch problematischer und erfordert die Pflege mehrerer Versionen. Darüber hinaus erhöht sich die Komplexität des Architekturdesigns erheblich, wenn eine Website über mehrere Portale verfügt.

Daher haben sich manche Leute schon lange gefragt, ob es möglich wäre, „einmal zu entwerfen und es auf alle anzuwenden“, sodass sich dieselbe Webseite automatisch an Bildschirme unterschiedlicher Größe anpasst und das Layout automatisch entsprechend der Bildschirmbreite anpasst?

1. Das Konzept des „adaptiven Webdesigns“

Im Jahr 2010 schlug Ethan Marcotte den Begriff „Responsive Webdesign“ vor. Damit ist ein Webdesign gemeint, das die Bildschirmbreite automatisch erkennt und entsprechende Anpassungen vornimmt.

Er erstellte ein Sample mit den Porträts der sechs Hauptfiguren aus „Die Abenteuer des Sherlock Holmes“. Bei einer Bildschirmbreite größer als 1300 Pixel werden die 6 Bilder in einer Reihe angeordnet.

Bei einer Bildschirmbreite zwischen 600px und 1300px werden die 6 Bilder auf zwei Zeilen aufgeteilt.

Bei einer Bildschirmbreite zwischen 400px und 600px verschiebt sich die Navigationsleiste in den Kopfbereich der Webseite.

Wenn die Bildschirmbreite unter 400 Pixel liegt, werden die 6 Bilder auf drei Zeilen aufgeteilt.

Weitere Beispiele hierzu finden Sie auf mediaqueri.es.

Hier gibt es auch ein Testtool, das die Testergebnisse von Bildschirmen mit unterschiedlichen Auflösungen auf einer einzigen Webseite anzeigen kann. Ich empfehle, es zu installieren.

2. Automatische Anpassung der Webseitenbreite zulassen

Wie funktioniert „Adaptives Webdesign“? Eigentlich ist es gar nicht so schwierig.

Fügen Sie zunächst eine Zeile mit einem Viewport-Meta-Tag zum Kopf des Webseitencodes hinzu.

<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1" />

Ansichtsfenster ist die Standardbreite und -höhe der Webseite. Die obige Codezeile bedeutet, dass die Breite der Webseite standardmäßig der Bildschirmbreite (Breite = Gerätebreite) entspricht und das ursprüngliche Skalierungsverhältnis (Anfangsmaßstab = 1) 1,0 beträgt, d. h. die Anfangsgröße der Webseite nimmt 100 % der Bildschirmfläche ein.

Alle gängigen Browser unterstützen diese Einstellung, einschließlich IE9. Für diese älteren Browser (hauptsächlich IE6, 7, 8) müssen Sie css3-mediaqueries.js verwenden.

<!--[wenn IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

3. Verwenden Sie keine absolute Breite

Da die Webseite ihr Layout entsprechend der Bildschirmbreite anpasst, können Sie kein Layout mit absoluter Breite oder Elemente mit absoluter Breite verwenden. Dies ist sehr wichtig.

Insbesondere kann im CSS-Code keine Pixelbreite angegeben werden:

Breite: xxx px;

Es können nur prozentuale Breiten angegeben werden:

Breite: xx%;

oder

Breite: automatisch;

4. Relative Schriftgröße

Die Größe von Schriftarten kann nicht absolut (px), sondern nur relativ (em) festgelegt werden.

Körper {
Schriftart: normal 100 % Helvetica, Arial, serifenlos;
}

Der obige Code gibt an, dass die Schriftgröße 100 % der Standardgröße der Seite beträgt, also 16 Pixel.

h1 {
Schriftgröße: 1,5em;
}

Die Größe von h1 beträgt dann das 1,5-fache der Standardgröße, also 24 Pixel (24/16 = 1,5).

klein
Schriftgröße: 0,875em;
}

Die Größe des kleinen Elements beträgt das 0,875-fache der Standardgröße, also 14 Pixel (14/16 = 0,875).

5. Fließendes Gitter

„Fließendes Layout“ bedeutet, dass die Positionen jedes Blocks schwebend und nicht festgelegt sind.

.hauptsächlich {
schweben: rechts;
Breite: 70%;
}

.linkeLeiste {
schweben: links;
Breite: 25 %;
}

Der Vorteil von Float besteht darin, dass, wenn die Breite zu klein ist, um zwei Elemente aufzunehmen, das letztere Element automatisch an das Ende des ersteren gescrollt wird und nicht horizontal überläuft. Dadurch wird das Auftreten einer horizontalen Bildlaufleiste vermieden.

Darüber hinaus müssen Sie bei der Verwendung der absoluten Positionierung (Position: absolute) sehr vorsichtig sein.

6. Wählen Sie CSS laden

Der Kern des „adaptiven Webdesigns“ ist das von CSS3 eingeführte Media Query-Modul.

Das bedeutet, dass die Bildschirmbreite automatisch erkannt wird und dann die entsprechende CSS-Datei geladen wird.

<link rel="stylesheet" type="text/css"
Medien="Bildschirm und (maximale Gerätebreite: 400px)"
href="tinyScreen.css" />

Der obige Code bedeutet, dass die Datei tinyScreen.css geladen wird, wenn die Bildschirmbreite weniger als 400 Pixel beträgt (max-device-width: 400px).

<link rel="stylesheet" type="text/css"
Medien="Bildschirm und (Mindestbreite: 400px) und (Maximalgerätebreite: 600px)"
href="smallScreen.css" />

Wenn die Bildschirmbreite zwischen 400px und 600px liegt, wird die Datei smallScreen.css geladen.

Zusätzlich zum Laden von CSS-Dateien mithilfe von HTML-Tags können Sie diese auch in vorhandene CSS-Dateien laden.

@import url("tinyScreen.css") Bildschirm und (maximale Gerätebreite: 400px);

7. CSS @media-Regeln

In derselben CSS-Datei können Sie auch je nach Bildschirmauflösung unterschiedliche CSS-Regeln anwenden.

@media screen und (max-device-width: 400px) {

.Spalte {
Schwimmer: keiner;
Breite: automatisch;
}

#Seitenleiste {
Anzeige: keine;
}

}

Der obige Code bedeutet, dass, wenn die Bildschirmbreite weniger als 400 Pixel beträgt, der Spaltenblock nicht schwebt (float:none), die Breite automatisch angepasst wird (width:auto) und der Seitenleistenblock nicht angezeigt wird (display:none).

8. Bildanpassung (flüssiges Bild)

Beim „Responsive Webdesign“ muss neben Layout und Text auch eine automatische Skalierung der Bilder erreicht werden.

Hierzu ist nur eine Zeile CSS erforderlich:

img { max-width: 100%;}

Diese Codezeile funktioniert auch für die meisten in Webseiten eingebetteten Videos und kann daher wie folgt geschrieben werden:

img, Objekt { max-width: 100%;}

Ältere IE-Versionen unterstützen die maximale Breite nicht, daher müssen Sie Folgendes schreiben:

img { Breite: 100 %; }

Darüber hinaus kann es beim Skalieren von Bildern auf der Windows-Plattform zu Bildverzerrungen kommen. Zu diesem Zeitpunkt können Sie versuchen, den proprietären Befehl des Internet Explorers zu verwenden:

img { -ms-interpolation-mode: bikubisch; }

Alternativ imgSizer.js von Ethan Marcotte.

addLoadEvent(Funktion() {

var imgs = document.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

});

Wenn die Bedingungen es erlauben, ist es jedoch am besten, Bilder mit unterschiedlichen Auflösungen entsprechend der Bildschirmgröße zu laden. Hierzu gibt es viele Möglichkeiten, sowohl auf der Server- als auch auf der Clientseite.