Media Query Triggering, wenn es nicht sollte?

Question

Ich habe dieses test page. Darin befindet sich eine .Test_container Klasse, die ein Flex-Box-Spaltenlayout haben soll, wenn die Mindestbreite 768 Pixel beträgt. Dies ist die Medienabfrageregel, die bei 768 px eingreifen soll.

Wenn ich `flex-direction: row 'abwählen, rendert das Layout in einer Spalte. Wenn ich die Seite auf meinem Handy ansehe oder die Breite unter 768 px verkleinere, ist die Medienabfrage immer noch wirksam. Gedanken?

Answer 1

Sie haben die Meta-Tag im Kopf hinzufügen

<meta name="viewport" content="width=device-width" /> 

Bewährte mit der Testseite

Answer 2

Warum haben Sie alle Regeln mit! Wichtig? Sie müssen versuchen, das zu vermeiden, wenn Sie können. Wenn Sie kann nicht, wie auch immer, ich glaube, Sie diese verwenden können:

@media only screen and (min-width: 768px){ 
    -webkit-box-orient: horizontal !important; 
    -webkit-box-direction: normal !important; 
    -ms-flex-direction: row !important; 
    flex-direction: row !important; 
} 

kann ich es jetzt nicht testen, aber es sollte funktionieren

Answer 3

diese Versuch funktionieren sollte die Medienabfragesyntax zu verstehen gab es Probleme mit der Syntax und verwenden Sie nicht wichtig ifyou nicht

erforderlich

@media (min-width:768px) { 
.u-md-flex-row { 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
     -ms-flex-direction: row; 
     flex-direction: row; 
} 
}