为什么多个媒体查询不起作用？答案

【问题标题】：Why are multiple media queries not working?为什么多个媒体查询不起作用？
【发布时间】：2022-02-12 01:00:52
【问题描述】：

试图让多个媒体查询在移动设备上工作，但它只识别第一个，第二个什么都不做。请帮助和感谢。

它不会让我在不写更多文字的情况下发帖，所以请忽略这个哈哈。

再次：它不会让我在不写更多文字的情况下发帖，所以请忽略这个哈哈。

/* Medium sized screen */

@media all and (max-width: 1300px) {
  #left {
    width: 300px;
  }
  #right {
    width: calc(100% - 300px);
  }
  /* Filters */
  .filters {
    right: 100%;
    width: 100%;
    background-color: #F7F7F7;
    transition: right 1s;
    position: absolute;
    z-index: 1;
    top: 50px;
    height: calc(100% - 50px);
  }
  .filters .close {
    display: block;
    position: absolute;
    font-size: 30px;
    right: 0;
  }
  .filters.show {
    right: 0;
  }
  .filtersIcon {
    display: flex;
  }
  /* Drink list */
  .totalDrinks {
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .drinkList {
    width: 100%;
  }
}


/* Small screens */

@media all and (max-width: 900px) {
  #right {
    left: 100%
  }
  #left {
    width: 100%;
    position: absolute;
  }
  .drinkItem {
    min-height: 280px;
  }
}

编辑我发现了问题，我忘了在标题中添加这个

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【问题讨论】：

您可以添加您的 HTML 并制作一个 sn-p 以便我们可以看到它的实际效果吗？
我认为你也应该传递 min-width 值。如果您不传递 min-width 值，它将适用于宽度不超过 1300px 的所有设备。

标签： css media-queries

【解决方案1】：

试试这个可能有用..

@media only screen and (max-width: 1300px) {
  //styles//
}

【讨论】：

【解决方案2】：

您需要编写移动优先媒体查询。 Kindle 参考：mobile first media queries

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

  //CSS

}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

  //CSS

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

  //CSS

}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  //CSS

}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

  //CSS

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

  //CSS

}

link

【讨论】：

这取决于要求和个人的决定。

【解决方案3】：

如果我们想处理多个媒体查询，有一个简单的规则，那就是媒体查询的Order（排列）。

在这里，第二个什么都不做的主要原因是因为

查询冲突。

始终使用低像素值优先查询，更大像素值有效。

注意： 即使在添加标题之后有时也不起作用，标题也是强制性的，并且优先顺序非常重要。

在您的程序中，

您已将首选设置为 1300 像素。因此，它会覆盖最高 1300 像素的其他内容（900 像素低于 1300 像素。因此，在这里会发生查询冲突，并且您首先给出了 1300 像素，因此它不会显示为 900 像素）。

【讨论】：