Wie man eine Web-Seite Fit unterschiedlichen Bildschirmgrößen in CSS

Websites können auf verschiedenen Monitor Abmessungen und mobilen Geräten betrachtet werden, so dass Sie möchten, dass Ihre Web-Seite so viele Bildschirmgrößen wie möglich passen. Wenn Sie Ihre Site codieren, werden die Messungen von der Seite standardmäßig fest: Der Besucher sieht die gleiche Anzeige, egal was. Mit Cascading Style Sheets oder CSS, können Sie Ihre Seite Breiten auf einen Prozentwert eingestellt so Ihr Dokument ist flexibel, wenn der Betrachter ihr Browserfenster passt.

Beginnen Sie Ihren Text-Editor-Software und öffnen Sie die Website Dokument Sie ändern. Geben Sie diesen CSS-Code zwischen dem Kopf / Kopf-Elemente:

style type = "text / css"

/ Style

Geben Sie "# content {}" zwischen den Stil-Tags, um eine Regel, die den Hauptinhalt der Seite regelt erstellen.

Typ "width:;" innerhalb der geschweiften Klammern und geben Sie "100%" nach dem Doppelpunkt. Ihre fertigen CSS-Code sieht nun wie im folgenden Beispiel:

style type = "text / css"

# Content {width: 100%;}

/ Style

Positionieren Sie den Cursor irgendwo unterhalb der Öffnung body-Tag, wo Sie Ihren Text angezeigt werden soll. Geben Sie "div id =" content "/ div" und geben Sie Ihre Website-Inhalte zwischen den div-Elemente. Zum Beispiel:

div id = "content"

Das ist Ihre Webseiteninhalte.

/ Div

Speichern Sie das Dokument und eine Vorschau Ihrer Arbeit in einem Browser-Fenster. Laden Sie die Datei auf Ihrem Web-Host-Konto, um die aktualisierte Seite veröffentlichen.

Tipps und Warnungen

Wenn Sie eine andere Seite Element, wie eine Navigationsleiste, die Breite als Prozentsatz, so dass es auch Waagen in einem Browser-Fenster. Die Summe aller Elemente müssen nicht mehr als 100 Prozent. Zum Beispiel:

# Nav {width: 25%;}

# Content {width: 75%;}