'@media' 不会影响我的 Jumbotron 标头答案

【问题标题】：'@media' doesn't affect my Jumbotron header'@media' 不会影响我的 Jumbotron 标头
【发布时间】：2020-06-03 16:57:05
【问题描述】：

您好，我几天前刚刚开始 Web 开发。我希望我的网页标题具有响应性，因此它的宽度、高度、字体大小是灵活的。

<header class="text-white">
<div class="jumbotron bgimg text-white">
  <h1 class="display-4">    
    <i class="fa fas fa-star"></i>
    Hello, World!<i class="fa fas fa-star fa-1x"></i></h1>
  <p class="lead">This is my webpage</p>
  <hr class="my-4">
  <p class="lead">Web page details.</p>
  <a class="btn btn-primary" href="./file.zip" download="" role="button">Download!</a>
</div>

所以我编写了这样的代码，以便在小型移动设备上打印出较小的字母。我的问题是它保持不变并且我的背景图像随机裁剪。是因为我在h1 上设置了display-4 吗？

@media (max-width: 400px) {
  #headerh1 {
    width: 100%;
    height: 10%;
    font-size: 2em;
  }
}

谢谢你，一直以来。

【问题讨论】：

标签： html css twitter-bootstrap media-queries

【解决方案1】：

或者尝试在标题中添加id :)

<header id="headerh1" class="text-white">

【讨论】：

【解决方案2】：

问题在于选择器的简单使用

h1{
    width: 100%;
    height: 10%;
    font-size: 2em;
}

或者

h1.display-4{
        width: 100%;
        height: 10%;
        font-size: 2em;
    }

或更准确地说

header h1.display-4{
        width: 100%;
        height: 10%;
        font-size: 2em;
    }

阅读更多关于CSS Selectors

【讨论】：

我尝试了第三个你建议的其他属性，例如 background-size 有效但 font-size 2em 无效。我猜 2em 对于像 iphone5/iphone5s 这样的小型设备来说仍然足够大（我在 chrome 上测试）
@loone96 使用!important 和font-size 就像font-size: 2em !important; 我确信它是高优先级选择器的目标，而且你是对的2em 在移动设备上如此之大降低了它的价值喜欢1.2em 或14px
非常感谢！我可以再问你一个问题吗？如果我想在
中选择 h4 标签，那么在 CSS 中写 section>div>h4{} 是否正确？
@loone96 很高兴听到这有帮助...是的，它是正确的 Css 选择器，但我建议您至少使用一个类，然后进行选择，这样当您使用相同的 htnl 时它就不会生效结构类似于任何其他页面中的 div h4 部分......而且这个 > 意味着直接在 CSS 方面你可以阅读更多关于这个在上面提到的链接

【解决方案3】：

选择器#headerh1 {...} 应该是header h1 {...}（没有ID 但有标签，header 和h1 之间有空格）

如果没有选择元素，则代码中还有另一个更具体的 css 规则，因此您必须增加 css 特异性，例如通过编写（注意空格和“非空格”... ):

header.text-white div.jumbotron.bgimg.text-white h1.display-4 { ... }

【讨论】：