Teilen Sie die Lernzusammenfassung von Medienabfragen in CSS3

Medienabfragen in CSS3 werden häufig zum Erstellen von Frontend-Responsive-Design-Seiten verwendet. Hier geben wir eine Lernzusammenfassung über Medienabfragen in CSS3, einschließlich Lösungen für Kompatibilitätsprobleme in IE8.

1. Von Medienabfragen unterstützte Attribute

2. Schlüsselwörter
und - Mehrere Medienabfragen kombinieren, um nicht nur einen bestimmten Medientyp auszuschließen, sondern einen bestimmten Medientyp anzugeben

3. Beispiele für Zitierstile

<link rel="stylesheet" media="all" href="style.css" />   
<link rel="stylesheet" media="screen and (min-width:980px)" href="desktop.css" />   
<link rel="stylesheet" media="screen and (min-width:768px) and (max-width:980px)" href="pad.css" />   
<link rel="stylesheet" media="screen and (min-width:480) and (max-width: 768px)" href="phone.css" />   
<link rel="stylesheet" media="screen and (max-width:320px)" href="small.css" />

4. Beispiel für einen Inline-Stil

@media screen and (min-width: 980px) {   
    //css code
}   
@screen and (min-width:768px) and (max-width:980px) {   
    //css code
}   
@screen and (min-width:480) and (max-width: 768px) {   
    //css code
}   
@screen and (max-width:320px) {   
    //css code
}   

@media screen and (max-device-width: 480px) {   
    //max-device-width等于480px
}   
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {   
    //设备宽高比   
}   
@media all and (orientation:portrait) {   
    //竖屏   
}   
@media all and (orientation:landscape) {   
    //横屏   
}

5 I8-Kompatibilitätsprobleme
Ursache des Problems:
Medien werden in der CSS-Datei des Projekts verwendet, um das Layout automatisch an die Größe des Fensters anzupassen. IE8 und niedrigere Versionen tun dies jedoch nicht Unterstützt CSS3-Medienabfragen, dh der CSS-Code im @media-Bildschirm und (maximale Breite: 900 Pixel) wird nicht ausgeführt Sollte ich das tun? Viele Leute im Internet haben Lösungen vorgeschlagen:
IE8 und frühere Browser unterstützen keine CSS3-Medienabfragen. Sie können der Seite css3-mediaqueries.js hinzufügen.

@media screen and (max-width: 900px) {   
  ...   
}

Es stellt sich heraus, dass es ganz einfach ist, aber das Ergebnis ist sehr enttäuschend. Egal wie sehr ich es im Projekt versucht habe, es hat nicht geklappt. Ich hoffe, dass die Kollegen, die es ausprobiert haben, mir einen Rat geben können, als eine andere, etwas kompliziertere Methode zu verwenden, die ich auch aus dem Internet gelernt habe. Zum einen gibt es hier nur IE8 und niedrigere Versionen können dies tun, und das andere ist, dass nur Browser reduziert werden können. Diese Verarbeitung erfolgt erst nach einem bestimmten Größenbereich. Die Methode ist wie folgt:
Prinzip: Verwenden Sie jquery. Wenn Sie es nicht verstehen, wissen Sie einfach, wie man es verwendet. Ändern Sie dann die entsprechende CSS-Datei in HTML nach Bedarf.

Fügen Sie Folgendes hinzu Nach der gemeinsamen js-Datei für alle Seiten Code:

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

navigateLowerIE8.css-Datei ist das Seitenlayout von IE8 und anderen Browsern niedrigerer Versionen, wenn sie reduziert sind . OK, es ist tatsächlich alles erledigt.

Das obige ist der detaillierte Inhalt vonTeilen Sie die Lernzusammenfassung von Medienabfragen in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!