Warum funktioniert CSS3 @media nicht? Was ist der Grund?

Die Gründe, warum CSS3-Medien nicht funktionieren: 1. Das Viewport-Attribut ist nicht im HTML-Meta-Tag festgelegt. 2. Stilkonflikt, der Stil des @media-Abfragecodes wird durch das nachfolgende CSS überschrieben Fehler beim Schreiben des Formats, die mediah-Anweisung. Nach und muss ein Leerzeichen stehen.

Die Betriebsumgebung dieses Tutorials: Windows 10, CSS3, dieser Artikel gilt für alle Computermarken.

Verwandte Empfehlungen: „CSS-Video-Tutorial“

Verwenden Sie bei der Webseitenproduktion @media screen, um das Webseitenlayout an verschiedene Zugriffsgeräte anzupassen. Fügen Sie einfach das Bildschirmattribut @media zu CSS hinzu, schreiben Sie CCS-Stile entsprechend der Breite verschiedener Geräte, beurteilen Sie die Stildatei anhand der Browserbreite und geben Sie unterschiedliche Breitenwerte aus.

Aber manchmal stellt sich nach dem Festlegen der @media-Medienabfrage heraus, dass sie nicht funktioniert. Was ist der Grund? Wie kann man es lösen? Der folgende Artikel stellt es Ihnen vor.

Mögliche Gründe, warum CSS3 @media nicht funktioniert

Keine Panik, analysieren Sie es langsam.

Überprüfen Sie zunächst, ob das Problem am CSS selbst liegt und nicht daran, dass die Medienabfrage nicht wirksam wird. Zum Beispiel:

div{display:flex;}/*那么div所有的display效果都将无法生效*/

Der erste Fehler: Formatschreibfehler, gefolgt von einem Leerzeichen

Zum Beispiel der folgende Code:

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

Der zweite Fehler: Stilkonflikt der Stil der @media-Abfrage Code wird durch das nachfolgende CSS-Überschreiben geändert

Hinweis: Es wird empfohlen, beim Schreiben von CSS das CSS mit der @media-Abfrage hinten zu schreiben, um ein Überschreiben durch das vorherige CSS zu vermeiden.

Der dritte Fehler: Es liegt ein Problem mit dem CSS selbst vor und das CSS wird nicht wirksam.

Hinweis: Dies ist ein sehr häufiger Fehler. Das Blockelement schwebt beispielsweise und das übergeordnete Element hat keine Höhe Fügen Sie diesmal dem übergeordneten Element eine Hintergrundfarbe hinzu. Es wurde festgestellt, dass es sich tatsächlich um einen durch CSS verursachten Fehler handelte, der nicht angezeigt wurde.

Zum Beispiel führt die Priorität der CSS-Auswahl auch dazu, dass einer davon wirksam wird und der andere nicht. Es gibt viele Probleme, die durch CSS-Fehler verursacht werden, daher werde ich sie nicht einzeln auflisten.

Der vierte Fehler: Metaattribut-Ansichtsfensterattribut Obwohl dies ein grundlegender gesunder Menschenverstand ist, kann es sein, dass einige Leute ihn übersehen.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Der fünfte Fehler: Der Inhalt in Klammern darf das Endzeichen „;“ und andere Fehler nicht enthalten.

Lösung:

Es gibt viele Lösungen, aber der Vorschlag besteht darin, die CSS-Eliminierungsmethode zu verwenden und CSS zum Auskommentieren eines Teils davon zu verwenden.

Natürlich ist der Browser auch eine gute Möglichkeit, den Code anzuzeigen und Lösen Sie das Problem.

@media screen and (max-width:200px){
/*这只是一个示例*/
}

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonWarum funktioniert CSS3 @media nicht? Was ist der Grund?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!