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;
}}Nach dem Login kopieren
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:
1. 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)
Dokumentaufforderungen
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.
2. 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)
Instanzdemo
<!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>Nach dem Login kopieren
Hinweis :respond Es kann entweder .min.js oderrespond.src.js verwendet werden, laden Sie es einfach von der oben angegebenen Download-Adresse herunter. Der CSS-Teil ist der oberste Teil des Codes.
Anzeigeeffekt (der Anzeigeeffekt von IE6 und IE7-8 ist kein Problem, daher werden wir die Bilder hier nicht veröffentlichen):
Zu untersuchen
Der Inhalt im offiziellen Dokument ist noch nicht vorhanden wurde klar interpretiert (hauptsächlich ist nicht klar, wie man es anwendet)
Andere Plug-Ins, die Responsive Layout-CSS3-Mediaqueries-Js unterstützen
<!-- 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>
Nach dem Login kopieren
Es gibt kein offizielles Dokument oder keine offizielle Demo für CSS3-Mediaqueries -js, im Vergleich zurespond.js css3 -mediaqueries-jsunterstützt fast alle Medienabfragesyntax. Es erscheint ein Begrüßungsbildschirm. Es wird nicht empfohlen, es zu verwenden. Obwohl es alle Medienabfragen unterstützen kann, können „Min-Breite“ und „Max-Breite“ tatsächlich unsere Anforderungen an ein reaktionsfähiges Layout erfüllen.
CDN-Unterstützung
Da IE9 CSS3 unterstützt, können Sie direkt eine Skriptreferenz im Head-Tag der HTML-Seite hinzufügen:
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!
