Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Einfache responsive Implementierung von CSS

花姐姐
Freigeben: 2020-05-06 11:35:49
nach vorne
2426 Leute haben es durchsucht

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″ />
Nach dem Login kopieren

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]–>
Nach dem Login kopieren

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样式

Beispiel:

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

2. Verwenden Sie @import, um

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

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

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

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%;}
Nach dem Login kopieren

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%;}
Nach dem Login kopieren

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

img, object { max-width: 100%;}
Nach dem Login kopieren

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

img { width: 100%; }
Nach dem Login kopieren

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; }
Nach dem Login kopieren

oder Ethan Marcottes imgSizer.js:

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

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!

Verwandte Etiketten:
css
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage