In diesem Artikel wird die Implementierung von HTML5-responsivem (adaptivem) Webdesign vorgestellt und wie folgt mit allen geteilt:
Schritt 1: Fügen Sie im Kopf des Webseitencodes eine Zeile mit Viewport-Meta-Tags hinzu
<meta name=viewport content=width=device-width, initial-scale=1 />
Das Ansichtsfenster ist die Standardbreite und -höhe der Webseite. Die obige Codezeile bedeutet: Die Breite der Webseite entspricht standardmäßig der Bildschirmbreite (Breite = Gerätebreite) und dem ursprünglichen Skalierungsverhältnis (Anfangsskalierung). =1) ist 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]-- >
Schritt 2: (Hinweis) Verwenden Sie keine absolute Breite und Schriftgröße
width:auto; / width:XX%;
Schritt drei: (Hinweis) Schriftgröße
Die Schriftgröße beträgt 100 % der Standardgröße der Seite, also 16 Pixel
Verwenden Sie für Schriftarten nicht die absolute Größe PX, sondern die relative Größe REM
html{font-size:62,5%;} body {font:normal 100% Arial,sans-serif;font-size:14px;font-size:1.4rem }Schritt 4: Ablauflayout
Die Bedeutung des flüssigen Layouts besteht darin, dass die Position jedes Blocks schwebend und nicht festgelegt ist.
.left{ width:30%; float:left} .right{ width:70%; float:right;}Der Vorteil besteht darin, dass, wenn die Breite zu klein ist, um zwei Elemente aufzunehmen, das folgende Element automatisch zum Ende des vorherigen Elements scrollt, ohne in horizontaler Richtung überzulaufen, wodurch das Erscheinen horizontaler Bildlaufleisten vermieden wird.
Schritt 5: Wählen Sie „CSS laden“.
Der Kern des adaptiven Webdesigns ist das von CSS3 eingeführte Media Query-Modul. Erkennen Sie automatisch die Bildschirmbreite und laden Sie dann die entsprechende CSS-Datei
<link rel=stylesheet type=text/css media=screen und (max-device-width: 600px) href=style/css/css600.css />
Der obige Code bedeutet, dass die Datei css600.css geladen wird, wenn die Bildschirmbreite weniger als 600 Pixel beträgt (maximale Gerätebreite: 600 Pixel).
Wenn die Bildschirmbreite zwischen 600 Pixel und 980 Pixel liegt, laden Sie die Datei css600-980.css
<link rel=stylesheet type=text/css media=screen und (min-width: 600px) und (max-device-width: 980px) href=css600-980.css />
Außerdem (nicht empfohlen): Zusätzlich zum Laden von CSS-Dateien mit HTML-Tags können Sie diese auch in vorhandene CSS-Dateien laden
@import url(css600.css) screen and (max-device-width: 600px);
Schritt 6: CSS-@media-Regeln
@media screen and (max-device-width: 400px) { .left{ float:none;} }Wenn der Bildschirm kleiner als 400 ist, bricht die linke Maustaste das Schweben ab
Schritt 7: Anpassung der Bilder
Responsive Webdesign muss auch eine automatische Skalierung von Bildern implementieren.
img, Objekt {max-width: 100 %;}Ältere IE-Versionen unterstützen keine maximale Breite, daher muss ich schreiben:
img {Breite: 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 des IE zu verwenden
img { width:100%; -ms-interpolation-mode: bicubic;}Oder verwenden Sie js--imgSizer.js
addLoadEvent(function() { var imgs = document.getElementById(content).getElementsByTagName(img); imgSizer.collate(imgs); });Hinweis: Wenn möglich, ist es am besten, Bilder mit unterschiedlichen Auflösungen entsprechend unterschiedlicher Bildschirmgrößen zu laden.
Einfache Bedienung:
<style type=text/css> img{ max-width:100%;} video{ max-width:100%;} header ul li{ float:left list-style; type:none; margin-right:10px;} header select{display:none;} @media (max-width:960px){ header ul{ display:none;} header select{ display:inline-block;} } </style> <body> <header> <ul> <li><a href=# class=active>Home</a></li> <li><a href =#>AAA</a></li> <li><a href=#>BBB</a></li> <li><a href=#>CCC</a></li> <li ><a href=#>DDD</a></li> </ul> <select> <option class=selected><a href=#>Home</a></option> <option value=/AAA>AAA</option> <option value=/BBB>BBB</ option> <option value=/CCC>CCC</option> <option value=/DDD>DDD</option> </select> </header> </body>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.