Wie HTML das Webdesign automatisch an die Bildschirmbreite anpasst

Im heutigen Artikel geht es hauptsächlich darum, wie HTML das Webdesign automatisch an die Bildschirmbreite anpasst. Ich hoffe, es kann allen helfen.

Automatische Anpassung der Webseitenbreite zulassen

Wie funktioniert „adaptives Webdesign“? Es ist nicht so schwierig.

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

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) und dem ursprünglichen Skalierungsverhältnis (Anfangsskalierung) entspricht =1) ist 1,0, d. h. die anfängliche Größ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.

Verwenden Sie keine absolute Breite

Da die Webseite das Layout entsprechend der Bildschirmbreite anpasst , können Sie keine absolute Breite verwenden. Das Layout kann auch keine Elemente mit absoluter Breite verwenden. Dieser ist sehr wichtig.

Insbesondere kann CSS-Code keine Pixelbreite angeben: <span style="font-family:'Courier New';font-size:14px;">width:xxx px;<code><span style="font-family:'Courier New';font-size:14px;">width:xxx px;</span>Nur prozentuale Breite kann angegeben werden: <span style="font-family:'Courier New';font-size:14px;">width: xx%;<code><span style="font-family:'Courier New';font-size:14px;">width: xx%;</span> oder <span style="font-family:'Courier New';font-size:14px;">width:auto;<code><span style="font-family:'Courier New';font-size:14px;">width:auto;</span>

<span style="font-family :'Courier New';font-size:14px;">Verwandte Empfehlungen: <code><span style="font-family:'Courier New';font-size:14px;">相关推荐：</span>

Adaptive Bildschirmbreite der Webseite

HTML5-responsives (adaptives) Webdesign

So erstellen Sie eine Webseite, die sich an die Bildschirmgröße anpasst

Das obige ist der detaillierte Inhalt vonWie HTML das Webdesign automatisch an die Bildschirmbreite anpasst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!