Einfache responsive Implementierung von CSS

1. Automatische Anpassung der Webseitenbreite zulassen

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

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

Ansichtsfenster ist die Standardbreite und -höhe der Webseite. Die obige Codezeile bedeutet, dass die Breite der Webseite standardmäßig der Bildschirmbreite entspricht (Breite = Gerätebreite). Das ursprüngliche Skalierungsverhältnis (initial-scale=1) beträgt 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.

<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>

2. Verwenden Sie die CSS3-Medienabfrage @media query

Es gibt drei Möglichkeiten, Medienabfragen auszudrücken:

1. Verwenden Sie

< CSS-Datei 🎜>@media 类型 and (条件1) and (条件二){}css样式

@media screen and (max-width:980px ) {
 body{
 background-color: red;
 }
}

@import url("css/moxie.css") all and (max-width:980px);

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

Übliche Schrifteinheiten in CSS sind px, em, rem und %rempx3. Fluid Grid (Fluid Grid)

Die Bedeutung von „Fluid Layout“ ist, dass in jedem Bereich die Positionen der Blöcke schwebend und nicht festgelegt sind. Der Vorteil von

.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}

float besteht darin, dass, wenn die Breite zu klein ist, um zwei Elemente aufzunehmen, das folgende Element automatisch unter das vorherige Element scrollt und nicht in horizontaler Richtung überläuft (Überlauf), wodurch das horizontale Scrollen vermieden wird Aussehen der Bar.

Außerdem müssen Sie bei der Verwendung der absoluten Positionierung (Position: absolut) sehr vorsichtig sein.

4. Adaptives Bild (Fluid Image)

Neben Layout und Text muss „adaptives Webdesign“ auch eine automatische Skalierung von Bildern implementieren.

Hierfür ist nur eine Zeile CSS-Code erforderlich:

img { max-width: 100%;}

img, object { max-width: 100%;}

img { width: 100%; }

Außerdem kann es beim Skalieren von Bildern auf der Windows-Plattform zu Bildverzerrungen kommen. Zu diesem Zeitpunkt können Sie versuchen, den proprietären Befehl des IE zu verwenden:

img { -ms-interpolation-mode: bicubic; }

oder Ethan Marcottes imgSizer.js:

addLoadEvent(function() { 
 var imgs = 
 document.getElementById("content").getElementsByTagName("i
 mg");
  imgSizer.collate(imgs);
});

Empfohlenes Lernen:

Das obige ist der detaillierte Inhalt vonEinfache responsive Implementierung von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!