为啥@media 查询不改变特定屏幕尺寸上的元素？
Posted
技术标签:
【中文标题】为啥@media 查询不改变特定屏幕尺寸上的元素？【英文标题】：Why doesn't the @media query change elements on particular screen sizes?为什么@media 查询不改变特定屏幕尺寸上的元素？ 【发布时间】：2016-12-14 08:39:48 【问题描述】：在 Bootstrap 3 中使用@media 查询。以下查询结构在查看教程时多次出现。但是，我仍然遇到问题。
min-width: 1200px 正确渲染字体大小（92px）和背景（红色），min-width: 992px 正确渲染字体大小（48px）和背景（绿色）。
但是，当我低于这两个 min-width: 768px 和 max-width: 768px 时，它们的属性不会应用于元素。感谢任何帮助！
@media(max-width:767px)
.jumbotron h1
font-size: 12px;
body
background: yellow;
@media(min-width:768px)
.jumbotron h1
font-size: 24px;
body
background: blue;
@media(min-width:992px)
.jumbotron h1
font-size: 48px;
body
background: green;
@media(min-width:1200px)
.jumbotron h1
font-size: 92px;
body
background: red;
<body>
<p class="jumbotron">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
</p>
</body>【问题讨论】：
你在哪些浏览器中测试过这个？ @Miloshio 在 Chrome 和 Firefox 中都以这种方式呈现，在 IE 11 中根本不起作用。 @lookininward 媒体查询按预期工作。我可以在较小的屏幕尺寸上看到黄色和蓝色背景。请检查问题中的 sn-p。 @feeela 这很奇怪。一旦我点击：@media(min-width:768px) .jumbotron h1 font-size: 24px; 身体 背景：蓝色； 它默认为白色背景。 @lookininward 我看不到您描述的行为。也许应用了其他一些样式表，这不是这个问题的一部分？ 【参考方案1】：唯一的问题是段落中有标题。更多信息请参考这个问题：Should a heading be inside or outside a <p>?
简而言之，标题不能在段落中。如果您希望获得相同的结果但没有遇到此问题，请改用 span：
@media(max-width:767px)
.jumbotron span
font-size: 12px;
body
background: yellow;
@media(min-width:768px)
.jumbotron span
font-size: 24px;
body
background: blue;
@media(min-width:992px)
.jumbotron span
font-size: 48px;
body
background: green;
@media(min-width:1200px)
.jumbotron span
font-size: 92px;
body
background: red;
<body>
<p class="jumbotron">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</p>
</body>【讨论】：
或者，只使用<div class="jumbotron"> 而不是<p>。
这是正确的，但考虑到 OP 可能希望在没有 的情况下换行，我选择了跨度。
这实际上是违反直觉的。使用div，OP 可以在其中使用多个段落，但使用p 标签，他们可以仅使用<br/>，因为其他任何内容都是无效的。以上是关于为啥@media 查询不改变特定屏幕尺寸上的元素？的主要内容，如果未能解决你的问题，请参考以下文章