为什么@media查询不会更改特定屏幕尺寸的元素？

Question

Playing around with @media queries with Bootstrap 3. The following query structure has come up multiple times while looking at tutorials. 使用Bootstrap 3进行@media查询。在查看教程时，以下查询结构已多次出现。 However, I'm still having issues. 但是，我还有问题。

min-width: 1200px renders the font size (92px) and background (red) correctly, min-width: 992px renders the font size (48px) and background (green) correctly. min-width：1200px正确渲染字体大小（92px）和背景（红色），min-width：992px正确渲染字体大小（48px）和背景（绿色）。

However, when I go lower than those two, min-width: 768px and max-width: 768px, their attributes are not applied to the elements. 但是，当我低于这两个，min-width：768px和max-width：768px时，它们的属性不会应用于元素。 Appreciate any bit of help! 感谢任何帮助！

  @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>

Answer 1

The single problem is that you are having a heading inside a paragraph. 唯一的问题是你在一个段落中有一个标题。 Please refer to this question for more information: Should a heading be inside or outside a <p>? 有关更多信息，请参阅此问题：标题是在<p>之内还是之外？

Briefly, a heading cannot be in a paragraph. 简而言之，标题不能在段落中。 If you desire to have the same result but not encounter this issue, use a span instead: 如果您希望获得相同的结果但不会遇到此问题，请使用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>

为什么@media查询不会更改特定屏幕尺寸的元素？

问题描述

1 个解决方案

解决方案1
1 2016-08-08 14:29:25

为什么@media查询不会更改特定屏幕尺寸的元素？

问题描述

1 个解决方案

解决方案1 1 2016-08-08 14:29:25

解决方案1
1 2016-08-08 14:29:25