Question

我有一个名为#sluzby（是的，ID）的部分，我在媒体查询中有一些断点，每个断点都有效，但max-height: 670px;除了那个断点，但是如果我把条件设置为background-color: red;它将改变背景颜色，但顶部位置不起作用，即使我放在那里!important。顺便说一句。我在不同的浏览器中对它进行了测试，但它并不适用于所有浏览器。我使用SCSS，但我认为你可以体验到这一点。这是HTML：

<section id="sluzby"><div class="example"></div></section>

这是SCSS：这是我的mixin，顺便说一句。我在#sluzby中包含了动画：

@mixin sluzby-media($sluzbymaxheight, $top, $hoptop) {
  @media screen and (min-height: $sluzbymaxheight) {
    #sluzby {
      top: $top !important;
    }
    @keyframes hop {
      0% {
        top: $hop;
      }
      30% {
        top: $hoptop;
      }
      55% {
        top: $hoptop;
      }
      100% {
        top: $hop;
      }
    }
  }
}

#sluzby  {
  @include width-height(100%, 1200px);
  margin: 0;
  padding: 0;
  background-color: transparent;
  z-index: 8;
  position: relative;
}

这有效：

@media screen and (min-height: 1200px) {
  #sluzby {
    top: -500px;
  }
}

这也是：

@media screen and (max-height: 850px) {
  #sluzby {
    top: -253px;
  }
}

这些也有效：

@include sluzby-media(850px, -253px, -493px);
@include sluzby-media(890px, -203px, -453px);
@include sluzby-media(930px, -143px, -383px);
@include sluzby-media(1025px, -47px, -293px);

但是在这篇文章中只有top: ...px没有：

@media screen and (max-height: 670px) {
  #sluzby {
    top: -1200px !important;
    background-color: red;
  }
}

每个@media都有：

@media screen and (max-height: 670px) {
  #sluzby {
    top: -1200px !important;
    background-color: red;
 }
}
@media screen and (max-height: 849.9px) {
  #sluzby {
    top: -253px !important;
  }
}
@include sluzby-media(850px, -253px, -493px);
@include sluzby-media(890px, -203px, -453px);
@include sluzby-media(930px, -143px, -383px);
@include sluzby-media(1025px, -47px, -293px);
@media screen and (min-height: 1200px) {
  #sluzby {
    top: -40px !important;
    background-color: green;
  }
}

我不知道为什么它不起作用，我不知道你是否可以帮助我，但也许你可以。如果你想要更多的代码，请评论这篇文章。以下是我在imgur上的问题图片：https://imgur.com/a/iIBdL

一切都适用于媒体查询，除了CSS顶部

0 个答案: