CSS3 媒体查询不起作用

Question

所以我正在尝试让我的网站响应。我有一些媒体查询。第一个不包含在媒体查询中，因为它小于 768px，适用于手机。然后我有另一个 @media (min-width: 768px) {} 和 @media (min-width: 1200px) {}。

但是，我在移动版的 div 周围添加了一个框阴影，由于某种原因，当屏幕超过 768px 时，框阴影仍然出现在 div 周围，它仍然存在。你知道为什么会这样吗？

这只是我如何拥有它的一个例子。

HTML

<div>CONTENT</div>

CSS

div {
  box-shadow: 5px 5px 10px black;
}

@media (min-width: 768px) {
      div {/* I got rid of box shadow, but it's still displaying on screens higher than 768px */
       }
}
@media (min-width: 1200px) {
   div { /* I got rid of box shadow, but it's still displaying on screens higher than 1200px */
   }
}

Answer 1

尝试使用

@media (max-width: 768px)