html - CSS @media 查询未按预期工作

Question

我的最后一个媒体查询根本没有做任何事情，我是否遗漏了有关媒体查询的某些内容？

@media only screen and (max-width: 1025px) and (min-width: 901px){
  .menu-box{
    margin: 3px 6px 3px 6px;
  }
}

@media only screen and (max-width: 900px) and (min-width:771px){
  .menu-box{
    margin: 3px 1px 3px 1px;
  }
}

@media only screen and (max-width: 770px) and (min-width: 700px){
  .menu-box{
    margin: 3px 3px 3px 3px;
  }
}
/* this one does not work */
@media only screen and (max-width: 360px){
  .box-wrapper{
    left: -20px;
  }
}

Answer 1

这很奇怪。它必须工作。你可以看到这个Codepen .检查这些:

1. .box-wrapper 类名是否正确？是类还是 Id？
2. 您的.box-wrapper 类是否有position: absolute 或position: relative？因为 left CSS 属性不适用于 position: static。 “静态”位置也是默认设置。