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)

Answer 2

也许你需要max-width：768px，而不是min-width

Answer 3

我发现有时媒体查询无论出于何种原因都不适合我，相反你可以使用jQuery：

<script>//mobile responsiveness
var width = jQuery(window).width();
function ipad() {
if (width <= 1024 && width >= 768){ //if tablet
//css here

} else if (width < 768){  //if mobile phone
//css here
}
}

jQuery(document).ready(function () {
ipad();//run when page first loads
});

jQuery(window).resize(function () {
ipad();//run on every window resize
});
</script>

CSS3媒体查询无效

HTML

CSS

3 个答案: