Web-Frontend
HTML-Tutorial
Was ist ein responsives Layout? Implementierung eines responsiven HTML-Layouts
Was ist ein responsives Layout? Implementierung eines responsiven HTML-Layouts
Der Inhalt dieses Artikels befasst sich mit der Frage, was ein responsives Layout ist. Die Implementierung des responsiven HTML-Layouts hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.
Schritt eins: Fügen Sie eine Zeile mit Viewport-Meta-Tags am Kopf des Webseitencodes hinzu
(1) Viewport ist die Standardbreite und -höhe der Webseite Die obige Codezeile lautet: Die Breite der Webseite entspricht standardmäßig der Bildschirmbreite (Breite = Gerätebreite), und das ursprüngliche Skalierungsverhältnis (Anfangsskalierung = 1) beträgt 1,0, also das Original Die Größe der Webseite nimmt 100 % der Bildschirmfläche ein.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
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) Durch Festlegen des Werts von X-UA-Compatible in Meta können Sie die Kompatibilitätsmoduseinstellungen der Webseite festlegen.
#IE-Browser: Unabhängig davon, ob eine DTD zum Deklarieren des Dokumentstandards verwendet wird, verwendet IE8/9 die IE7-Engine zum Rendern der Seite.
<meta http-equiv="X-UA-Compatible" content="IE=7">
#IE-Browser, IE8/9 verwendet die IE8-Engine zum Rendern der Seite.
<meta http-equiv="X-UA-Compatible" content="IE=8">
#IE-Browser, IE8/9 und spätere Versionen verwenden die höchste IE-Version zum Rendern der Seite.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> <meta http-equiv="X-UA-Compatible" content="IE=7,9">
#IE=edge weist den IE an, die neueste Engine zum Rendern von Webseiten zu verwenden, und chrome=1 kann Chrome Frame aktivieren.
Das chrome=1 bedeutet hier nicht, dass die Technologie des IE verbessert wurde, um den Chrome-Browser zu simulieren, sondern ist mit dem von Google entwickelten Google Chrome Frame (Google Embedded Browser Framework GCF) verwandt. Dieses Plug-in kann das Erscheinungsbild des IE-Browsers des Benutzers unverändert lassen, aber der Benutzer verwendet beim Surfen im Internet tatsächlich den Chrome-Kernel und unterstützt IE6/7/8 unter Windows XP und höher.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Schritt 2: Fließendes Layout
Die Position jedes Blocks auf der Seite ist schwebend und nicht festgelegt. Wenn die Breite zu klein ist, können zwei Elemente nicht platziert werden und das folgende Element scrollt automatisch unter das vorherige Element und läuft nicht in horizontaler Richtung über, wodurch das Erscheinen der horizontalen Bildlaufleiste vermieden wird
.left{ width:30%; float:left}
.right{ width:70%; float:right;}Schritt 3: CSS @media-Regeln, selektives Laden von CSS
@media screen and (max-device-width: 400px) { .left{ float:none;} }Wenn der Bildschirm kleiner als 400 ist, bricht die linke Maustaste das Schweben ab.
Der Kern des „adaptiven Webdesigns“ ist das von CSS3 eingeführte Media Query-Modul. Ermitteln Sie automatisch die Bildschirmbreite und laden Sie dann die entsprechende CSS-Datei. Wenn die Bildschirmbreite weniger als 600 Pixel beträgt (maximale Gerätebreite: 600 Pixel), laden Sie die Datei css600.css. Wenn die Bildschirmbreite zwischen 600 Pixel und 980 Pixel liegt, wird die Datei css600-980.css geladen.
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />
Zusätzlich zum Laden von CSS-Dateien mit HTML-Tags können Sie auch
@import url("css600.css") screen and (max-device-width: 600px);in vorhandene CSS-Dateien laden. Schritt 4: Verwenden Sie keine absolute Breite und Schriftgröße
(1 ) width:auto; / width:XX%;
(2) Die Schriftgröße beträgt 100 % der Standardgröße der Seite, also 16 Pixel. Verwenden Sie für Schriftarten keine absolute Größe „PX“, sondern relative Größe „REM“
html{font-size:62.5%;} body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem;Schritt 5: Anpassung von Bildern
„Adaptives Webdesign“ muss auch eine automatische Skalierung von Bildern implementieren.
img, object {max-width: 100%;}Die alte Version von IE unterstützt keine maximale Breite, daher muss sie wie folgt geschrieben werden:
img {width: 100%;}Beim Skalieren von Bildern auf der Windows-Plattform kann es zu Bildverzerrungen kommen. Zu diesem Zeitpunkt können Sie versuchen, den proprietären Befehl
img { width:100%; -ms-interpolation-mode: bicubic;}des IE zu verwenden oder js--imgSizer.js
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});zu verwenden. Empfohlene verwandte Artikel:
Ersetzen oder in HTML Wie schreibe ich den Code zum Hinzufügen eines Website-Hintergrundbilds? (Beispiel) Einführung in das Tabellen-Tag
