CSS ermittelt unterschiedliche Auflösungen und zeigt unterschiedliche Breitenlayouts an, um eine adaptive Breite zu implementieren-HTML-Tutorial-php.cn

CSS ermittelt unterschiedliche Auflösungen und zeigt unterschiedliche Breitenlayouts an, um eine adaptive Breite zu implementieren

WBOY

Freigeben： 2016-08-30 09:21:06

Original

1115 Leute haben es durchsucht

1. Wenn die Auflösung im CSS DIV-Webseitenlayout kleiner oder gleich 1024 Pixel (Pixel) ist, zeigt das DIV-Layoutobjekt eine Breite von 1000 Pixel an, und wenn die Auflösung größer als 1024 Pixel ist, zeigt es eine Breite von an 1200px und andere Anforderungen. Verwenden Sie CSS, um die Anzeigebreite des Browsers zu ändern, um das Layout der Webseitenbreite dynamisch zu ändern (die Webseitenbreite wird automatisch mit der Anzeigebreite des Browsers breiter und schmaler).
Mit der Entwicklung haben immer mehr Computerbenutzer immer höhere Bildschirmauflösungen, aber einige Benutzer verwenden immer noch Displays mit einer Auflösung von 1024 Pixel (laut Daten, die von mehreren statistischen Plattformen für Browserauflösungen erhalten wurden, die jetzt verwendet werden). Es gibt nur sehr wenige Benutzer mit Auflösungen unter 1200. Beim Entwerfen des CSS-Layouts müssen wir jedoch immer noch Benutzer mit einer Auflösung von mindestens 1024 Pixel berücksichtigen. Wenn die Breite des Webseitenlayouts auf 1200 Pixel festgelegt ist, wird unter dem Browser eine Bildlaufleiste angezeigt, wenn Benutzer mit einer Auflösung von 1024 im Internet surfen Problem: Sie können CSS3-Stile verwenden, um die Breite des Browsers des Benutzers zu bestimmen und unterschiedliche Layoutbreiten aufzurufen.

Verwenden Sie CSS-Wörter und -Syntax

Der Code lautet wie folgt:

@media screen und (judgement attribute){ CSS-Stilauswahl }

Beachten Sie hier, dass der zu ändernde CSS-Stilselektor in den geschweiften Klammern enthalten ist.

2. Beispiele für die Anzeige unterschiedlicher Breitenstile bei unterschiedlichen Auflösungen

1. Beschreibung des kleinen DIVCSS-Falls
Wir legen zunächst ein DIV-Box-CSS mit dem Namen „.abc“ fest, setzen dessen Höhe auf 300 Pixel, den CSS-Rand auf Schwarz und stellen das automatische Layout von margin:0 auf zentriert ein. Diese beiden Stile sind zur einfacheren Beobachtung voreingestellt.
Wir ziehen den Browser manuell, um die Breite anzuzeigen, und beobachten dann die Änderung der Breite des Feldes Wird auf eine Breite von nicht mehr als 901 Pixel eingestellt, wird die Boxbreite angezeigt. „.abc“ entspricht der Boxbreite, die 200 Pixel anzeigt. Wenn die Browserbreite auf mehr als 1201 Pixel eingestellt ist, wird die Boxobjektbreite auf 1200 Pixel angezeigt als 1200 Pixel beträgt die Anzeigebreite 900 Pixel.

2. CSS-Code

Der Code lautet wie folgt:

.abc{ height:300px; border:1px solid #000; margin:0 auto🎜>
@ Medienbildschirm und (min-width: 1201px) {
.abc {width: 1200px}
}
/* CSS-Hinweis: Wenn die Browserbreite auf nicht weniger als 1201 Pixel eingestellt ist, zeigt abc eine Breite von 1200 Pixel an*/

@media screen and (max-width: 1200px) {
.abc { Breite: 900px }
}
/* abc wird bei der Browserbreite festgelegt ist nicht größer als 1200 Pixel. Anzeige 900 Pixel Breite*/

@media screen und (maximale Breite: 901 Pixel) {
.abc {width: 200px;}
}
/* Wenn die Browserbreite auf nicht mehr als 901 Pixel eingestellt ist, zeigt abc eine Breite von 200 Pixel an*/

@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* Wenn die Browserbreite auf nicht mehr als 500 Pixel eingestellt ist, zeigt abc eine Breite von 100 Pixel an*/

Es ist zu beachten, dass der CSS-Code in Ordnung ist und das CSS von groß nach klein eingegeben wird (je größer die Breite des Browsers, desto höher ist es aufgrund der logischen Beziehung und @media). Die Beurteilung des CSS-Debuggings führt zu einer ungültigen Beurteilung.

3. HTML-Code

Der Code lautet wie folgt: