Was ist ein responsives Layout? Implementierung eines responsiven HTML-Layouts
不言
Freigeben： 2018-08-06 16:31:42
Original
7657 Leute haben es durchsucht
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.
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.
#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.
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
Schritt 3: CSS @media-Regeln, selektives Laden von CSS
@media screen and (max-device-width: 400px) { .left{ float:none;} }
Nach dem Login kopieren
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" />
Nach dem Login kopieren
Zusätzlich zum Laden von CSS-Dateien mit HTML-Tags können Sie auch
@import url("css600.css") screen and (max-device-width: 600px);
Nach dem Login kopieren
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;
Nach dem Login kopieren
Schritt 5: Anpassung von Bildern
„Adaptives Webdesign“ muss auch eine automatische Skalierung von Bildern implementieren.
img, object {max-width: 100%;}
Nach dem Login kopieren
Die alte Version von IE unterstützt keine maximale Breite, daher muss sie wie folgt geschrieben werden:
img {width: 100%;}
Nach dem Login kopieren
Beim Skalieren von Bildern auf der Windows-Plattform kann es zu Bildverzerrungen kommen. Zu diesem Zeitpunkt können Sie versuchen, den proprietären Befehl
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
Nach dem Login kopieren
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
in HTML (mit Code)
Einführung in das flexible Layout (Flex) in HTML (Mit Code)
Das obige ist der detaillierte Inhalt vonWas ist ein responsives Layout? Implementierung eines responsiven HTML-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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
