Passen Sie Ihre Website an alle Auflösungen an

Eines der wichtigsten Dinge, die Sie beim Entwerfen einer Website beachten sollten, ist sicherzustellen, 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 minimalen und maximalen Auflösungswerten.

In diesem kurzen Artikel erhalten Sie Tipps, wie Sie sicherstellen können, dass Ihre Website auf Bildschirmen aller Größen korrekt angezeigt wird .

Passen Sie Ihre Website an alle Bildschirme an

Das Definieren der relativen Breite einer Seite ist die empfohlene Methode für das Webseiten-Design, da die Seite an Bildschirme beliebiger Größe angepasst werden kann. Indem Sie die Breite in Prozent im Gegensatz zur Einheitenzahl definieren, können Sie für jeden Teil der Seite ein gewisses Maß an Flexibilität festlegen, sodass er auf der Grundlage der Bildschirmspezifikationen eines Betrachters vergrößert oder verkleinert werden kann.

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

 Körper {Breite: 100%;} 

In diesem Beispiel bestimmt der Code, dass die Seite Ihrer Website unabhängig von der Größe des Anzeigebildschirms 100% des Fensters einnimmt. Wenn Sie möchten, dass Ihre Seite etwas kleiner erscheint, empfehlen wir Ihnen, die Breite auf mindestens 80% einzustellen, oder Sie riskieren, dass Ihr Inhalt auf dem Bildschirm zu klein erscheint. Wenn Sie eine kleinere Breite definieren, können Sie den Bildschirm mit Hilfe von margin: auto fokussieren.

Minimum oder Maximum Width-Eigenschaft

Die Eigenschaft für die minimale oder 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 Seitenbreite von 90%, zentriert, mit einer Mindestbreite von 600 Pixel und einer Maximalbreite von 2000 Pixel:

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