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。 “静态”位置也是默认值。

Answer 2

我已经完成了我的媒体查询，这是不正确的。