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

标签： htmlcssmedia

Answer 1

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

1. .box-wrapper类名正确吗？是班级还是身份证？
2. 你的.box-wrapper班级有position: absolute或position: relative吗？因为leftCSS 属性在position: static. '静态'位置也是默认的。