So lösen Sie das Problem, dass CSS3-Medien nicht funktionieren

Lösung: 1. Stellen Sie sicher, dass das Medienschreibformat „@media screen and (css style){}“ ist. 2. Überprüfen Sie, ob die Stile in Konflikt stehen. 3. Legen Sie das Viewport-Attribut des Meta-Tags fest Klammern nach Medien Das Abschlusszeichen „;“ kann nicht geschrieben werden. Falls vorhanden, muss es entfernt werden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

css3 Zusammenfassung der Gründe, warum @media nicht funktioniert

Bestätigen Sie zunächst, ob es sich um ein Problem mit dem CSS selbst handelt und nicht beispielsweise darum, dass die Medienabfrage nicht wirksam wird.

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

Der externe Stil stellt den verwendeten src vor im CSS ein Flüchtigkeitsfehler

<link src="/css/imgpro.css" rel="stylesheet" > /*这是错误的*/
<link href="/css/imgpro.css" rel="stylesheet" >/*这是正确的*/

Wenn es sich um ein CSS-Problem handelt und wir die spezifischen Probleme nur im Detail analysieren können.

Bitte befolgen Sie die folgenden Fehler zur Fehlerbehebung.

Der erste Fehler: Das Format ist falsch geschrieben und es muss ein Leerzeichen dahinter stehen.

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

Der zweite Fehler: Stilkonflikt; der Stil des @media-Abfragecodes wird durch den folgenden überschrieben CSS

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

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

Hinweis: Dies ist ein sehr häufiger Fehler. Beispielsweise führt das schwebende Blockelement dazu, dass das übergeordnete Element zu diesem Zeitpunkt keine Hintergrundfarbe hat wird nicht wirksam. Tatsächlich handelt es sich um einen durch CSS verursachten Fehler, der nicht angezeigt wird.

Zum Beispiel führt die Priorität der CSS-Auswahl auch dazu, dass einer davon wirksam wird und der andere nicht. Es gibt auch 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, könnten einige Leute ihn übersehen

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

Der fünfte Fehler: Der Inhalt in Klammern kann das Endzeichen „;“ nicht schreiben, und andere Fehler.

Verwandte Empfehlungen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass CSS3-Medien nicht funktionieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!