我的媒体查询遇到了问题,仅在移动宽度设备上,最低查询(最大宽度:320px)在屏幕为 414px 时接管(最大宽度:414px)并且(最大-width: 375px) 当屏幕为 375px 时。我没有在 320px 上设置 !important。较大的媒体查询在 (max-width: 768px) 及以上工作。还有其他人经历过这种行为吗?
我的查询在样式表中是从高到低的顺序,我需要将它们从低到高翻转吗?
@media (max-width: 768px)
@media (max-width: 414px)
@media (max-width: 375px)
@media (max-width: 320px)
最佳答案
我开始制作一个测试用例(如下),并意识到它可能就像与 browser's interpretation of the viewport 发生冲突一样简单。 .
#foo {
margin: 10px;
padding: 10px;
background-color: #ff0;
}
#foo:after {
content: "Default CSS";
}
@media (max-width: 768px) {
#foo {
background-color: #f0f;
}
#foo:after {
content: "Max Width 768";
}
}
@media (max-width: 414px) {
#foo {
background-color: #00f;
}
#foo:after {
content: "Max Width 414";
}
}
@media (max-width: 375px) {
#foo {
background-color: #0f0;
}
#foo:after {
content: "Max Width 375";
}
}
@media (max-width: 320px) {
#foo {
background-color: #f00;
}
#foo:after {
content: "Max Width 320";
}
}
<div id="foo"></div>
关于html - 媒体查询对较宽宽度的查询进行最低查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44593659/