CSS3媒体查询不工作

因此，我正在努力使我的网站响应。我有几个媒体问题。第一个不包含在媒体查询中，因为它小于移动电话的768px。然后我有另一个@media（最小宽度：768px）{}和@media（最小宽度：1200px）{}

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

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

HTML

---

也许您需要最大宽度：768px，而不是最小宽度

我发现有时候媒体查询无论出于什么原因都不适合我，您可以使用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>

//移动响应
var width=jQuery（window）.width（）；
函数ipad（）{
if（宽度=768）{//if
//css在这里
}else if（宽度<768）{//if移动电话
//css在这里
}
}
jQuery（文档）.ready（函数（）{
ipad（）；//第一次加载页面时运行
});
jQuery（窗口）.调整大小（函数（）{
ipad（）；//在每个窗口上运行调整大小
});

尝试使用

@media (max-width: 768px)

---

您是否为媒体查询添加了元标记？共享完整的代码，然后我们可以找出确切的问题。是的，我已经添加了元标记。一切都很好，除了大屏幕上div周围的方框阴影，它本来就不应该出现在那里。代码与我在那里发布的代码相似，以使其更简单。只是盒子的阴影让我很难受。我想使用最大宽度吗？因为我刚刚开始，有人告诉我，使用最小宽度比最大宽度更方便。你是说我应该只为768px设置最大宽度，而为1200px设置最小宽度？只为768px或1200px设置最小宽度？那太棒了，但是，一家初创公司给了我一个网站挑战，告诉我不要使用javascript。只有CSS3和HTML5。不过我很感谢你的帮助，我会把这个作为将来的参考。

<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>

@media (max-width: 768px)