媒体查询被重写

Question

我做了一个“响应属性”混入这需要一个CSS属性和它的值在五个不同的断点作为参数：

@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; 
    } 
} 

例如@include responsiveProp(height, 1300px, 900px, 550px, 500px, 500px);

这通常可以很好地减少CSS中的LOC，但是当在Chrome开发工具中使用智能手机布局测试上述示例时，尽管宽度为< 768px，但$ xs断点将被$ sm断点覆盖。我不明白为什么会发生这种情况。有任何想法吗？

Answer 1

我忘了把它添加到我的index.html：<meta name="viewport" content="width=device-width, initial-scale=1">。这解决了问题。