大桌面和小桌面元素响应问题答案

【问题标题】：Large desktop and small desktop element responsive problem大桌面和小桌面元素响应问题
【发布时间】：2021-08-29 12:58:22
【问题描述】：

我有一个问题，我有购物车主 div 元素，问题是使移动响应正确，在笔记本电脑（宽度：1024）或更小范围内正常工作，因为我使用：

@media (min-width: 801px)
#cart-modal {
    left: 59%;
}

但在大屏幕（宽度如：1920px）我使用：

@media only screen and (min-width: 801px) and (max-width: 1920px)
#cart-modal {
    left: 69%;
    width: 600px;
}

不工作！

我希望当我打开大屏幕时，这个购物车应该离开：69%，当我打开笔记本电脑时，应该离开：59%

请帮助我，谢谢！

【问题讨论】：

标签： css media-queries

【解决方案1】：

您已将两个查询的最小宽度设置为相同。现在，当您在小屏幕上打开页面时，会应用两个查询，但会执行第二个查询，因为它是最新的。

第一个应该是这样的：

@media (min-width: 801px) and (max-width: 1920px)
#cart-modal {
    left: 59%;
}

第二个应该是：

@media only screen and (min-width: 1920px)
#cart-modal {
    left: 69%;
    width: 600px;
}

【讨论】：

谢谢，但不工作，我检查了桌面版本，同样它只看到这个代码
@media (min-width: 801px) and (max-width: 1920px) #cart-modal { left: 59%; }

【解决方案2】：

请参阅MDN documentation 以正确构建@media 查询。在这种情况下，您的查询缺少父大括号 { ... }，应该如下所示：

@media (min-width: 801px) {
  #cart-modal {
      left: 59%;
  }
}

@media (min-width: 1920px) {
  #cart-modal {
      left: 69%;
      width: 600px;
  }
}

【讨论】：