css 媒体查询无法正常工作

Question

我有一个 div（语言模块），它位于页面 header 的图像之上。 div 有一个 "absolute" 位置，因此它位于图像的顶部。

问题是，当 window 的宽度调整到 1499px 以下时，浏览器没有加载正确的 css，因为它使用第二个媒体查询（max-width： 1500px)

其他上述媒体查询工作正常！

@media (max-width: 2500px) {
    .mydiv{position:absolute; top:0; left:0; padding-left: 920px;padding-top: 160px;}
}

@media(max-width:1500px) {
    .mydiv{position:absolute; top:0; left:0; padding-left: 920px;padding-top: 160px;}
}

} @media(max-width:1499px) {
    .mydiv{position:absolute; top:0; left:0; padding-left: 700px;padding-top: 130px;}
}

我在编写这些查询时需要帮助。

谢谢

Answer 1

尝试切换到最小宽度，看看是否能解决您的问题。或者，如果这不能解决问题，您将不得不尝试这样的事情：

@media (min-width: 1500px) and (max-width: 2499px) {
    .mydiv{position:absolute; top:0; left:0; padding-left: 920px;padding-top: 160px;
}

Answer 2

在最后一个媒体查询之前有一个额外的括号!!

对此感到抱歉

Answer 3

删除最后一个媒体查询@media(max-width:1499px)之前的粗体括号。多了一个括号

@media (max-width: 2500px) {
.mydiv{position:absolute; top:0; left:0; padding-left: 920px;padding-top: 160px;}
}

@media(max-width:1500px) {
.mydiv{position:absolute; top:0; left:0; padding-left: 920px;padding-top: 160px;}
}

**}** @media(max-width:1499px) {
.mydiv{position:absolute; top:0; left:0; padding-left: 700px;padding-top: 130px;}
}

css 媒体查询无法正常工作

css media queries not working correctly

css

joomla

media-queries