css - mixin 中的媒体查询被覆盖

Question

我制作了一个“响应式属性”mixin，它将一个 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 开发工具中使用智能手机布局测试上述示例时，尽管宽度小于 768 像素，但 $xs 断点被 $sm 断点覆盖。我不明白为什么会这样。有什么想法吗？

Answer 1

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