Medien Abfrage in mixin außer Kraft gesetzt werden

Question

ich eine ‚Reaktions Eigenschaft‘ mixin gemacht, die an fünf verschiedenen Stützpunkte als Argumente eine CSS-Eigenschaft und seine Werte annimmt:

@mixin responsiveProp ($prop, $xs, $sm, $md, $lg, $xlg) { 
    @media only screen and (min-width: 0px) { 
    #{$prop}: $xs; 
    } 
    @media only screen and (min-width: 768px) { 
    #{$prop}: $sm; 
    } 
    @media only screen and (min-width: 992px) { 
    #{$prop}: $md; 
    } 
    @media only screen and (min-width: 1200px) { 
    #{$prop}: $lg; 
    } 
    @media only screen and (min-width: 1440px) { 
    #{$prop}: $xlg; 
    } 
} 

z.B. @include responsiveProp(height, 1300px, 900px, 550px, 500px, 500px);

Diese Regel funktioniert groß wie eine Art und Weise LOC in CSS zu reduzieren, aber wenn sie mit einem Smartphone Layout in Chrome Dev-Tool das obige Beispiel zu testen, wird das $ xs Breakpoint durch den $ sm Haltepunkt trotz der < 768px wobei Breite außer Kraft gesetzt . Ich kann nicht verstehen, warum das passiert. Irgendwelche Ideen?

Answer 1

Ich hatte vergessen, dies zu meiner index.html hinzuzufügen: <meta name="viewport" content="width=device-width, initial-scale=1">. Das hat das Problem gelöst.