Medienabfrage nicht funktioniert, Klassen mit Anzeigeeigenschaft

Question

ich eine einfache Medienabfrage ändern müssen, das nicht funktioniert ... hier ist mein Code:

In einem externen Stylesheet:

@media screen and (max-width: 768px) { 
    .logo_1000{display:none !important;} 
    .logo_320{display:visible !important;} 
} 

Als nächstes wird in dem HTML-Code meiner PHP Header-Datei habe ich zwei Sätze von Logo HTML, jeder in seiner eigenen Wrapper mit einem der oben genannten Klassen:

<div class="logo_1000" style="margin: 0px auto 0px; width: 1000px; height:100px;"> 
    <div style="width:100%; height:100px; display:inline-block;"><img src="http://www.bangorchildcare.com/wp-content/uploads/2016/04/logo-1000x100.png" width="1000" height="100" /></div> 
</div> 
<div class="logo_320" style="display:none; margin: 0px auto 0px; width: 100%; height:100px;"> 
    <div style="width:100%; height:100px; display:inline-block;"><img src="http://www.bangorchildcare.com/wp-content/uploads/2016/04/logo-320-100.png" width="320" height="100" /></div> 
</div> 

Answer 1

Es funktioniert nicht, da der Browser immer inline verwenden CSS über CSS definiert b y "" über externe Stile. Vielleicht möchten Sie Chrome DevTools (F12) verwenden, werden sie Ihr Leben viel einfacher

Answer 2

wird Wert von display nicht korrekt ist, gibt es so eine Sache wie visible, sollte es etwas aus der Liste sein definiert für die Eigenschaft, siehe http://www.w3schools.com/cssref/pr_class_display.asp für gültige Werte.

Wenn Sie mit der Maus über die gelbe Warnmarkierung fahren, wird normalerweise angezeigt, was falsch ist.

Answer 3

Sie mißbrauchen die Anzeige Eigenschaft von CSS. Die Eigenschaft display gibt den Typ der Box an, die für ein HTML-Element verwendet wird. Es gibt keine display: visible;. Werfen Sie einen Blick in here

• inline Standardwert. Zeigt ein Element als ein Inline-Element wie Span
• Block ein Element zeigt als Blockelement wie p
• flex Displays ein Element als Block-flex-Container. Neu in CSS3
• Inline-Block Zeigt ein Element als Inline-Level-Block-Container an. Das Innere dieses Blocks ist als Block-Level-Box formatiert, und das Element selbst ist als Inline-Level-Box formatiert.
• inline-flex Zeigt ein Element als Inline-Level-Flex-Container an.in CSS3 New
• inline-table Das Element als Inline-Level-Tabelle angezeigt wird
• list-item das Element wie ein Element li
• Lauf in Zeigt ein Element entweder als verhalten Let Block oder inline, je nach dem Kontext
• Tabelle das Element wie ein Tabellenelement
• table-caption verhalten Lassen Sie die Elem Lassen ent verhält sich wie ein Beschriftungselement
• table-column-Gruppe das Element
• table-header-Gruppe wie ein colgroup Element verhalten Lassen das Element wie ein thead Element verhalten Lassen
• Tisch-footer- Gruppe das Element wie ein Element tfoot
• table-row-Gruppe verhalten Lassen das Element verhält sich wie ein tbody Element Lassen
• table-cell Lassen das Element wie ein td-Element verhalten
• Tischsäule das Element wie ein col Element das Element
• table-row verhalten Let Lassen wie ein tr Element
• keine verhalten das Element wird überhaupt nicht angezeigt (hat keinen Einfluss auf das Layout )
• initial Setzt diese Eigenschaft auf ihren Standardwert. Lesen Sie über die Initiale
• erben Erbt diese Eigenschaft von seinem übergeordneten Element.

Beispiel CSS:

@media only screen and (max-width: 768px) { 
.logo_1000{display:none !important;} 
.logo_320{display:block !important;} 
} 

Answer 4

GELÖST:

Das Problem war hiarchy Kaskaden Regeln. Das externe Stylesheet, in dem sich die Medienabfrage befand, konnte die Anzeigeeigenschaften, die intern im HTML-Dokument festgelegt wurden, nicht übersteuern. Die Lösung bestand darin, die interne CSS in das externe Stylesheet zu verschieben und dann die Elemente in der Medienabfrage ein- und auszublenden. Wie so:

/****LOGO*******************/ 

/Fix für Mobiltelefone/ /***************************/

.logo_1000 {display: inline-block;}/* Zeigen Sie den Standard */

.logo_320 {display: none;}/* Verbergen des Mobile */

@media Bildschirm und (max-width: 768px) {/ * jetzt sind wir auf mobilen, tauschen Sie die Logos */

.logo_1000{display:none !important;} 
.logo_320{display:inline-block !important;} 

}