为什么媒体查询不能正常工作?

Question

当我写max-width(1220px)时，它在宽度为1300px时有效，当我写第二个断点1150px时，现在从1300px开始只工作1150px，忽略了1220px

HTML代码

<div class="container">
<div class="inner">
<div class="left">arrow left</div>
<div class="right">arrow right</div>
</div>
</div>

样式代码

.container {
width: 1600px;
margin: auto;
}
.inner {
position: relative;
}
.left,
.right {
position: absolute;
}
.left {
left: -50px
}
.right {
left: 300px
}
@media (max-width: 1220px) {
.right {
left: 250px
}
}
@media (max-width: 1150px) {
.right {
left: 210px
}
}

你可以在这里看到图像描述https://i.stack.imgur.com/7viiX.jpg

Answer 1

max-width: 1220px媒体查询适用于宽度为1220px或更小的设备，max-width: 1150也是如此。

这是你的代码中两个断点应该发生的情况:

• 当器件宽度大于1220px—>.right { left: 300px; }

• 当器件宽度小于1220px且大于1150px—>.right { left: 250px; }

• 当器件宽度小于1150px—>.right { left: 210px; }