Warum überschreiben Nicht-Medienabfragen manchmal Medienabfragen in CSS?

Medienabfragen vs. Nicht-Medienabfragen: CSS-Spezifität verstehen

In CSS werden Medienabfragen verwendet, um Stile basierend auf dem Gerätebildschirm anzuwenden Größe oder andere Eigenschaften des Ansichtsfensters. Es wird jedoch häufig beobachtet, dass Medienabfragen im Vergleich zu regulären CSS-Deklarationen scheinbar eine niedrigere Priorität haben.

Grund für niedrigere Priorität

Dieses Verhalten ergibt sich aus dem Konzept der CSS-Kaskade . Wenn mehrere Regeln auf dasselbe Element abzielen, priorisiert der Browser die Regeln basierend auf ihrer Spezifität. Selektoren mit einer höheren Spezifität überschreiben diejenigen mit einer niedrigeren Spezifität.

Medienabfragen erhöhen nicht automatisch die Spezifität von Selektoren. Wenn also ein Nicht-Medien-Abfrageselektor und ein Medien-Abfrageselektor dieselbe Spezifität haben, hat der Nicht-Medien-Abfrageselektor Vorrang, wenn die Medienabfrage irrelevant ist.

Beispiel:

Bedenken Sie das folgende CSS-Snippet:

.logo img {
    width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }
}

In diesem Beispiel wird die Nicht-Medien-Abfrageregel definiert eine Standardbreite von 100 % für das Logobild. Wenn die Bildschirmbreite jedoch innerhalb des angegebenen Bereichs liegt, wird die Medienabfrage aktiviert und setzt die Breite auf 120 %.

Liegt die Bildschirmbreite jedoch außerhalb dieses Bereichs, gilt die Nicht-Medien-Abfrageregel Priorität, wobei die Breiteneinstellung der Medienabfrage überschrieben wird.

Lösungen zur Erhöhung der Priorität

Zum Erhöhen die Priorität von Medienabfragen:

1. Reihenfolge der Regelsätze vertauschen:

   • Verschieben Sie die Medienabfrageregel unter die Nicht-Medienabfrage Regel, um die kaskadierende Reihenfolge zu nutzen.

2. Erhöhen Selektorspezifität:

   • Verbessern Sie die Spezifität des Medienabfrageselektors durch Hinzufügen zusätzlicher Tag- oder Attributselektoren. Wenn Sie beispielsweise ein Bild in „.logo“ ändern, wird dessen Spezifität erhöht.

3. Verwenden Sie !important (Achtung):

   • Diese Methode beinhaltet das Hinzufügen von „!important“ zur Medienabfrageregel. Davon wird jedoch abgeraten, da es zu Wartungsproblemen führen kann.

Das obige ist der detaillierte Inhalt vonWarum überschreiben Nicht-Medienabfragen manchmal Medienabfragen in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!