Responsives Layout, das idealerweise auf verschiedene PCs/mobile Endgeräte reagiert. Medienabfragen werden von IE9+ und anderen modernen Browsern unterstützt, aber IE8 nimmt immer noch einen relativ großen Marktanteil ein, sodass wir IE-Low-End-Browser in Betracht ziehen müssen.
Wie kann man also ein responsives Layout mit IE6~8-Browsern kompatibel machen? Hier müssen wir eine solche Datei verwenden:respond.js. Datei-Download-Adresse: https://github.com/scottjehl/Respond.
Freundliche Erinnerung, Freunde, es gibt einige Dinge, die bei der Verwendung von „respond.js“ beachtet werden müssen. Wenn Sie nicht darauf achten, wird es in IE6-8 nicht angezeigt.
Grundlegende Stile schreiben
Um ein responsives Layout zu implementieren, müssen Sie zunächst grundlegende responsive Layoutstile schreiben.
Code kopieren
html,body {
height: 100%;}@media only screen and (min-width: 480px){
body {
background: yellow;
}}
@media only screen and (min-width: 640px) and (max-width: 1024px) {
body {
background: green;
}}
@media screen and (min-width: 1024px){
body {
background: blue;
}}Plug-in-Prinzip
Als nächstes müssen Sie die Implementierungsidee vonrespond.js verstehen:
Der erste Schritt besteht darin, alle extern eingeführten CSS-Dateipfade im Kopf herauszunehmen und sie in einem Array
zu speichern Der zweite Schritt besteht darin, das Array zu durchlaufen und AJAX-Anfragen einzeln zu senden Schritt 3: Analysieren Sie nach dem AJAX-Rückruf die Syntax für die minimale und maximale Breite der Medienabfrage in der Antwort (beachten Sie, dass nur minimale Breite und maximale Breite unterstützt werden) und analysieren Sie den entsprechenden CSS-Block, der dem Ansichtsfenster entspricht Intervall ändern;
Der vierte Schritt besteht darin, während der Seiteninitialisierung und der Fenstergröße den entsprechenden CSS-Block entsprechend dem aktuellen Ansichtsfenster zu verwenden.
Kernschlussfolgerung
An diesem Punkt können Sie basierend auf den grundlegenden Implementierungsideen einige Dinge herausfinden, auf die Sie beim Schreiben von Code achten sollten:Dokumentaufforderungen1. Sie müssen den lokalen Server (localhost) starten und können nicht die normale lokale URL-Adresse (beginnend mit file://
) verwenden 2. CSS-Dateien müssen extern importiert werden und das Schreiben von CSS-Stilen im Stil ist ungültig 3. Da das Antwort-Plugin nach CSS-Dateien sucht und diese dann verarbeitet, muss die Antwortdatei nach der CSS-Datei
platziert werden 4. Obwohl dies durch die Platzierung von Respond im Kopf oder hinter dem Körper erreicht werden kann, wird außerdem empfohlen, es im Kopf zu platzieren (die spezifischen Gründe werden in den Dokumententipps unten erwähnt)
5. Es ist am besten, die UTF-8-Codierung nicht für CSS festzulegen und die Standardeinstellung zu verwenden (weitere Informationen finden Sie im Abschnitt „Dokumentaufforderungen“ weiter unten)
Einige Tipps aus der offiziellen Dokumentation:
1. Je früher Sie die Datei „respond.js“ einführen, desto wahrscheinlicher ist es, dass Sie den Begrüßungsbildschirm vermeiden, der unter IE erscheint.Instanzdemo2. Verschachtelte Medienabfragen werden nicht unterstützt
3. Die Zeichenkodierung von utf-8 hat Auswirkungen auf den Betrieb der Datei „respond.js“
Offizieller API-Originaltext: Wenn CSS-Dateien in UTF-8 mit Byte-Order-Mark codiert sind, funktionieren sie nicht mit Respond.js in IE7 oder IE8
Die grundlegende Bedeutung ist: Die Zeichenkodierung von CSS-Dateien im UTF-8-Format wirkt sich auf das Plug-In aus.
Aber wenn ich IE6-8 zum Testen verwende, kann es normal angezeigt werden (unabhängig davon, ob ich Zeichensatzeinstellungen in der CSS-Datei hinzufüge oder Zeichensatzeinstellungen im Link-Tag hinzufüge). Daher ist die Bedeutung dieses Standortfehlers nicht ganz klar.
4. Ein Begrüßungsbildschirm kann domänenübergreifend auftreten (noch nicht getestet, die spezifische Situation ist unbekannt)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5-响应式布局--respond.js-独行冰海</title>
<link rel="stylesheet" href="test.css" charset="utf-8">
<script src="respond.min.js"></script>
</head>
<body>
<p class="wrap" id="con">
让IE6~8支持响应式布局</p>
</body>
</html>Anzeigeeffekt (der Anzeigeeffekt von IE6 und IE7-8 ist kein Problem, daher werden wir die Bilder hier nicht veröffentlichen):Der Inhalt im offiziellen Dokument ist noch nicht vorhanden wurde klar interpretiert (hauptsächlich ist nicht klar, wie man es anwendet)Zu untersuchen
<!-- Respond.js proxy on external server --> <link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" /> <!-- Respond.js redirect location on local server --> <link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" /> <!-- Respond.js proxy script on local server --> <script src="/path/to/respond.proxy.js"> </script>
CDN-Unterstützung
Das obige ist der detaillierte Inhalt vonSo verwenden Sie „respond.js', um das responsive Layout von IE6 ~ 8 zu lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
