媒体查询不适用于 Sass 项目

Question

我正在做一个 Sass 项目，一切正常，但媒体查询不工作。我尝试将它们添加到文档的底部，添加到标签链中，比普通链具有更高的特异性，但没有任何效果。你知道这可能是什么问题吗？

这是我所做的：

断点：

$mobile-breakpoint: 600px;
$laptop-breakpoint: 922px;

在这种情况下，即使宽度小于 922px 也会应用媒体查询：

img{
    height: 5vw;
    margin: 3vh 4vh 4.6vh 3vh;
    @media(min-width: $laptop-breakpoint){
        height: 4vw;
    }
}

转换为CSS后的代码：

.main-header .header-logo-search a img {
  height: 5vw;
  margin: 3vh 4vh 4.6vh 3vh;
}
@media (min-width: 922px) {
  .main-header .header-logo-search a img {
    height: 4vw;
  }
}

在这种情况下，它不应用媒体查询：

input{
      @include search();
      width: 30vw;
      box-sizing: border-box;
      padding: 0 1.5vw;
      font-size: 1.2rem;
      background-color: $snow;
      border-radius: 5px 0 0 5px;
      @media(max-width: 600px){
      display: none;
}

转换为CSS后的代码：

.main-header .header-logo-search form input {
  height: 3.5rem;
  line-height: 3.5rem;
  border: none;
  margin: auto 0;
  width: 30vw;
  box-sizing: border-box;
  padding: 0 1.5vw;
  font-size: 1.2rem;
  background-color: #FFF9FB;
  border-radius: 5px 0 0 5px;
}
@media (max-width: 600px) {
  .main-header .header-logo-search form input {
    display: none;
  }
}

提前致谢

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果没有视口元标记，您的网站将呈现到设备的默认虚拟视口中。

媒体查询不适用于 Sass 项目

Media-queries not working on Sass project

html

css

sass

media-queries