Optimale Webseitenbreite und ihre kompatible Implementierungsmethode

Im folgenden Artikel wird die Implementierung der zweiten Methode basierend auf der Lösung von CSS-Tricks erläutert, die eigentlich sehr einfach ist.

3.

Zunächst wird die Standardbreite der Webseite so bestimmt, dass sie der Anzeigebreite von 1024 Pixeln entspricht. Dies liegt nicht nur daran, dass 1024 x 768 derzeit die gängigste Auflösung ist, sondern auch daran, dass sich diese Breite für Webseiten am besten eignet: 1) Sie bietet ausreichend Platz für Inhalt, ausreichend für ein dreispaltiges Layout; 2) Eine einzelne Textzeile sollte nicht zu lang sein, 1024 Pixel sind die Grenze, da es sonst schnell zu Leseermüdung kommt; 3) Unter den aktuellen Bedingungen der Internetbandbreite ist es für Webseiten schwierig, großformatige Bilder zu verwenden, die eine hohe Auflösung erfordern.

Zweitens ändert sich die Breite der Webseite automatisch im Bereich von 780px bis 1260px, d. h. das Minimum beträgt nicht weniger als 780px und das Maximum nicht mehr als 1280px.

Und schließlich werden Webinhalte bei höheren Auflösungen automatisch zentriert.

4.

So schreiben Sie eine CSS-Datei, nur 4 Zeilen. Dabei ist zu beachten, dass sich diese Anweisungszeilen alle auf die komplette Seite beziehen, also jeweils nur auf den Body-Tag bzw. den äußersten Div-Bereich.

Rand: 10px automatisch;

Diese Zeile stellt sicher, dass die Webseite bei jeder Auflösung zentriert wird.

Mindestbreite: 780px;
maximale Breite: 1260px;

Diese beiden Zeilen geben die minimale und maximale Breite der Webseite an. Beachten Sie, dass IE6 diese beiden Zeilen nicht unterstützt, das heißt, sie sind in IE6 ungültig.

Breite: Ausdruck(Dokument.Body.ClientWidth < 782? "780px" : Dokument.Body.ClientWidth > 1262? "1260px" : "auto");

Wenn Sie außerdem möchten, dass sich die inneren Blöcke automatisch ausdehnen und verkleinern, können Sie deren Breite in Prozenten angeben, zum Beispiel:

#div-links{
Breite: 50 %;
}

#div-rechts{
Breite: 50 %;
}

Das Endergebnis und den Quellcode-Download finden Sie hier. Durch Ändern der Größe des Browserfensters können Sie feststellen, dass die Webseite automatisch im Bereich von 780–1260 Pixel skaliert wird.

5.

Abschließend sei noch empfohlen, bei der Arbeit am Computer nicht blind auf eine hohe Auflösung zurückzugreifen, da diese wenig aussagekräftig ist.