Media Query Regeln haben keine Priorität

Question

Also arbeite ich an einer Website, mit einem seltsamen Problem mit einer Medienabfrage, einige der Regeln außer Kraft gesetzt. Es ist für eine Vorlage, also gibt es ein Basis-Framework-CSS und dann eine andere Template-spezifische CSS-Datei, die danach kommt. Aus Gründen der Klarheit, das ist der Auftrag in meinem HTML ist

<link href="/themes/Base/base.min.css" rel="stylesheet" type="text/css"> <!-- Contains all of the base rules, including the base mobile rules--> 
<link href="/themes/MyTheme/theme.min.css" rel="stylesheet" type="text/css"> <!-- Contains all of the theme specific overrides--> 

In dem base.min.css Datei habe ich diese Regeln:

@media all and (max-width: 800px) { 
.... 
#menu { 
position: relative; 
width: 100%; 
min-height: auto; 
margin: 0px; 
padding: 0px; 
top: 0px; 
right: 0px; 
text-align: center; 
border-bottom-width: 1px; 
border-bottom-style: solid; 
border-top-width: 1px; 
border-top-style: solid; 
background-image: none; 
} 
.... 

dann in theme.min.css-Datei, die nach dem in der HTML-Datei kommt, habe ich diese Regeln

.... 
#menu { 
box-sizing: border-box; 
text-align: left; 
padding: 10px; 
min-height: 320px; 
width: 300px; 
box-shadow: 0 0 5px #000000; 
position: relative; 
margin: -20px 0 0 0; 
z-index: 100; 
background-position: bottom right; 
background-repeat: no-repeat; 
background-image: url(/themes/global/images/watermarks/watermark9.png); 
} 
.... 

Beachten Sie, dass der zweite Satz von Regeln nicht in einer Medienabfrage enthalten sind. Trotzdem überschreiben die meisten Regeln die vorherigen Regeln. Die Höhe, Breite, das Hintergrundbild usw. Ich ging davon aus, dass die Medienabfrage Vorrang haben würde, wenn alles andere gleich wäre (trotz späterer kommen) aufgrund erhöhter Spezifität. Ich meine, ich könnte eine Reihe von !important; auf sie, wenn ich brauche, aber das scheint wie ein Bandaid, keine Lösung.

Answer 1

Im Wesentlichen ist Ihre zweite CSS-Gruppe eine Medienabfrage von "everything", und da sie nach den Max-width-Regeln erfolgt, gilt sie auch für die max-width 800px-Ansicht.

Bin ich im Recht, einige dieser Regeln sollten nicht unter 800px angewendet werden? Wenn dies der Fall ist, legen Sie sie in eine Regel für die Mindestbreite, und sie werden nicht verwendet. Zum Beispiel in theme.css:

#menu { 

    /*Put rules for any width in here*/ 

}  

@media all and (min-width: 801px) { 
    #menu { 
     /*Put rules you don't want inherited by max 800 in here*/ 
     min-height: 320px; 
     width: 300px; 
     ... 
    } 
}