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

e.g。 @include responsiveProp(height, 1300px, 900px, 550px, 500px, 500px);

这通常可以很好地减少CSS中的LOC，但是当在Chrome开发工具中使用智能手机布局测试上述示例时，$ xs断点被$ sm断点覆盖，尽管宽度为＆lt; 768px。我无法理解为什么会这样。有什么想法吗？

Answer 1

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

mixin中的媒体查询被覆盖

1 个答案: