Passen Sie Ihre Website an alle Auflösungen an

Letzte Aktualisierung am 21. Juli 2020 um 13:48 Uhr von David Webb.

Eines der wichtigsten Dinge, die Sie beim Entwerfen einer Website beachten sollten, ist Folgendes: Stellen Sie sicher, dass Ihre Seite auf Bildschirmen und Geräten aller Größen korrekt angezeigt wird. Dies kann durch Einfügen einer Codezeile in Ihre Seite erfolgen, die die relative Breite einer Seite definiert, oder durch Bereitstellen von Werten für die minimale und maximale Auflösung. Dieser kurze Artikel gibt Ihnen Tipps, wie es geht Stellen Sie sicher, dass Ihre Website auf Bildschirmen aller Größen korrekt angezeigt wird.


Passen Sie Ihre Website an alle Bildschirme an

Definieren einer Seite relative Breite ist die empfohlene Methode für das Design von Webseiten, da sich die Seite an Bildschirme jeder Größe anpassen lässt. Indem Sie die Breite in Prozent im Gegensatz zur Einheitennummer definieren, schaffen Sie ein gewisses Maß an Flexibilität für jedes Stück der Seite, sodass es basierend auf den Bildschirmspezifikationen eines Betrachters wachsen oder schrumpfen kann.

Die Definition der relativen Breite einer Website erfolgt über Body Tags. Dieses Tag kann angepasst werden, wenn Sie a verwenden div # body::

body{width:100%;}

In diesem Beispiel schreibt der Code vor, dass die Seite Ihrer Website unabhängig von der Größe des Bildschirms 100% des Fensters einnimmt. Wenn Ihre Seite etwas kleiner erscheinen soll, empfehlen wir, die Breite auf mindestens 80% einzustellen. Andernfalls besteht die Gefahr, dass Ihr Inhalt auf dem Bildschirm zu klein erscheint. Wenn Sie eine kleinere Breite definieren, können Sie Ihren Bildschirm mit fokussieren Rand: Auto.

Minimum oder Maximum Width Eigenschaft

Das Minimum oder Eigenschaft für maximale Breite kann auch verwendet werden, während die Website an alle Arten von Auflösungen angepasst wird. Es ist jedoch wichtig zu beachten, dass eine minimale Breite in Internet Explorer nicht unterstützt wird und dass das Festlegen einer maximalen Breite zu einer verzerrten Darstellung führen kann, wenn eine kleinere Seite nicht auf einen größeren Bildschirm passt.

Hier ist ein Beispiel einer Website mit einer zentrierten Seitenbreite von 90%, einer minimalen Breite von 600 Pixel und einer maximalen Breite von 2000 Pixel:

body{width:90%;margin:auto;min-width:600px;max-width:2000px}