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

@media 类型 and (条件1) and (条件二){}css样式

Beispiel:

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

2. Verwenden Sie @import, um

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

3 zu importieren Verbindung, Medienattribut Wird zum Festlegen der Abfragemethode verwendet:

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

3. Einige weitere zu beachtende Punkte

1. Verwenden Sie keine absolute Breite

Da sich die Webseite anpasst Das Layout richtet sich nach der Bildschirmbreite und kann nicht verwendet werden. Das Layout mit absoluter Breite kann keine Elemente mit absoluter Breite verwenden. Dieser ist sehr wichtig. Insbesondere kann der CSS-Code nicht die Pixelbreite angeben: width: xxx px; er kann nur die prozentuale Breite angeben: width: xx%; oder width: auto 2. Verwenden Sie stattdessen relative Schriftgrößen von

Ü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%;}

Diese Codezeile gilt auch für die meisten in Webseiten eingebetteten Videos und kann daher wie folgt geschrieben werden:

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

Ältere Versionen von IE Max-width werden nicht unterstützt, daher muss ich schreiben:

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:

CSS

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!