[英]Why are my media queries not applying?
编辑为add ,所以没有人将其发布为答案:我的代码中已经有一个视口标签。
我在这里已经阅读了许多对类似问题的回答,并且可以确定我的问题可能是在查询被声明的顺序中出现的,但是我一生都无法找出问题所在。
我有两个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中具有不同的布局。)
我遇到的问题是,无论我将浏览器缩放到什么尺寸(使用ctrl-shift-m在FF中进行测试以获取移动视图,在Chrome中使用开发工具中的移动视图按钮进行测试),显示。
这是我的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;}
}
它是最小宽度 ...表示宽度大于该宽度的任何内容(例如所有浏览器)都将具有这些属性。 将其更改为最大宽度,就可以了。
编辑:以下所有内容都是正确的,但不是@EmmyS问题的原因。 解决方案在上面。
我最近在Foundation遇到了这个问题,我怀疑bootstrap也有问题。 您的html 可能缺少元声明:
<meta name="viewport" content="width=device-width, initial-scale=1">
将其添加到HTML的头部,它可能会正常工作。 您遇到此问题的原因是因为移动浏览器正在决定“好吧,我不知道如何显示该网站,因此即使我使用的是大型浏览器,也要对其进行扩展不。”
您必须删除上一个媒体查询
@media only screen and (min-width: 300px) {
#home-slogan-container-small { display: block !important;}
#home-slogan-container-large { display: none !important;}
}
原因是,这最后一个是唯一具有最小宽度规则的规则,并否决了所有规则(除非wieport <300px)
像这样重写所有样式:
/* Styles for size 0px - 799px */
.small {
display: block;
}
.middle {
display: none;
}
.large {
display: none;
}
/* Styles for size 800px - 1200px */
@media (min-width: 800px) {
.small {
display: none;
}
.middle {
display: block;
}
.large {
display: none;
}
}
/* Styles for size 1200px and more */
@media (min-width: 1200px) {
.small {
display: none;
}
.middle {
display: none;
}
.large {
display: block;
}
}
我选择了800px和1200px作为断点。 您可以修改它们或添加新的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.