编辑添加,因此没有其他人将此作为答案发布:我的代码中已经有一个视口(viewport)标签。
我在这里阅读了很多对类似问题的回复,我确信我的问题可能出在我的查询声明顺序中的某个地方,但我终究无法弄清楚在哪里。
我有两个 div,一个应该以宽布局显示,一个应该以窄布局显示。
<!-- for small layouts -->
<div class="container-fluid slogan text-center" id="home-slogan-container-small">
small
</div>
<!-- for 800 px and wider -->
<div class="container-fluid slogan text-center" id="home-slogan-container-large">
large
</div>
(这些非常精简;实际内容在 div 中有不同的布局。)
我遇到的问题是,无论我将浏览器缩放到什么大小(在 FF 中使用 ctrl-shift-m 获取移动 View 进行测试,在 Chrome 中使用开发工具中的移动 View 按钮进行测试),小布局显示。
这是我的CSS:
#home-slogan-container-small {
padding-top: 15px;
text-align: center !important;
display: none;
}
#home-slogan-container-large {
padding-top: 15px;
text-align: center !important;
display: none;
}
@media only screen and (max-width: 1500px) {
#home-slogan-container-small { display: none !important;}
#home-slogan-container-large { display: block !important;}
}
@media only screen and (max-width: 1200px) {
#home-slogan-container-small { display: none !important;}
#home-slogan-container-large { display: block !important;}
}
@media only screen and (max-width: 960px) {
#home-slogan-container-small { display: none !important;}
#home-slogan-container-large { display: block !important;}
}
@media only screen and (max-width: 800px) {
#home-slogan-container-small { display: block !important;}
#home-slogan-container-large { display: none !important;}
}
@media only screen and (max-width: 799px) {
#home-slogan-container-small { display: block !important;}
#home-slogan-container-large { display: none !important;}
}
@media only screen and (max-width: 420px) {
#home-slogan-container-small { display: block !important;}
#home-slogan-container-large { display: none !important;}
}
@media only screen and (min-width: 300px) {
#home-slogan-container-small { display: block !important;}
#home-slogan-container-large { display: none !important;}
}
我是一名 PHP/mySQL 开发人员,我得到了一个引导站点; CSS 不是我的强项。任何解释将不胜感激。
最佳答案
问题来了
@media only screen and (min-width: 300px) {
#home-slogan-container-small { display: block !important;}
#home-slogan-container-large { display: none !important;}
}
它是 min-width... 意味着任何宽度大于该宽度的东西(例如所有浏览器)都将具有这些属性。将其更改为 max-width 就可以了。
编辑:以下所有内容都是正确的,但不是@EmmyS 问题的原因。解决方法如上。
我最近遇到了 Foundation 的这个问题,我怀疑 bootstrap 也有这个问题。您的 html 可能缺少元声明:
<meta name="viewport" content="width=device-width, initial-scale=1">
将其添加到 HTML 的头部,它可能会正常工作。你遇到这个问题的原因是因为移动浏览器正在决定“好吧,我不知道如何显示这个网站,所以我要像我是一个大浏览器一样缩放它,即使我是不是。”
关于php - 为什么我的媒体查询不适用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31864569/