媒体查询中的两个最大宽度

Question

我看到有人在代码中使用它，想知道它是如何工作的。我见过 min-width 和 max-width 但从来没有见过这个。这是否意味着当宽度小于 460px 时仅运行，从而使 768px 最大宽度参数无关紧要？

@media (max-width: 768px) and (max-width: 460px) {
 CSS goes here
}

Answer 1

没什么特别的，取最小的max width

https://jsfiddle.net/

.dog {
  background: green;
  height: 200px;
  width: 200px
}

.width {
  height: 30px;
  background: blue;
  width: 460px;
}
@media (max-width: 460px) and (max-width: 768px) {

  .dog {
    background: red;
  }

}

<div class="width" width="460px">

</div>
<div class="dog">

</div>

媒体查询中的两个最大宽度

Two max widths in media query

css

media-queries