Question

我想让页面的一部分响应。但是我无法让它发挥作用。只有1920px的媒体查询才有效。

这是我的代码：

@media screen and (max-width: 1440px) and (min-width: 1350px) {
        #designer-info {
    margin-right: -129px;
    }
}    
@media screen and (max-width: 1920px) and (min-width: 1700px) {
        #designer-info{
        margin-right:-8%;
    }
}  
@media screen and (max-width: 2880px) and (min-width: 1920px) {
        #designer-info {
    margin-right: -430px;
    }
}

有人可以帮助我吗？我无法找到解决方案。

Answer 1

无法正常工作，因为您在一个查询min-width:1920px和另一个查询max-width:1920px中，因此它会覆盖。

不需要同时使用max-width和min-width

使用min-width

使用移动优先方法

@media (min-width: 1350px) {
  #designer-info {
    margin-right: -129px;
  }
}
@media (min-width: 1700px) {
  #designer-info {
    margin-right: -8%;
  }
}
@media (min-width: 1920px) {
  #designer-info {
    margin-right: -430px;
  }
}

使用max-width

的非移动方法

@media (max-width: 2880px) {
  #designer-info {
    margin-right: -430px;
  }
  @media (max-width: 1920px) {
    #designer-info {
      margin-right: -8%;
    }
  }
  @media (max-width: 1440px) {
    #designer-info {
      margin-right: -129px;
    }
  }
}

Answer 2

需要在<meta name="viewport" content="width=device-width, initial-scale=1">主管部分添加HTML。

<!doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   ...
 </head>
 <body>
   ...
 </body>
</html>

Answer 3

可能会覆盖(max-width: 1920px)和(min-width: 1920px)

您应该在每个媒体查询中使用不同的宽度。

希望这可以帮到你实施例

(max-width: 1920px) and (min-width: 1700px)

和

(max-width: 1921px) and (min-width: 2880px)

@media查询不会调整大小

3 个答案: