“@media”不会影响我的超大屏幕 header

Question

您好，我几天前才开始网络开发。我希望我的网页 header 能够响应，因此它的宽度、高度 font-size 是灵活的。

<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;
  }
}

谢谢你，永远。

Answer 1

select或#headerh1 {...}应该是header h1 {...}（没有ID但有标签，space在header和h1之间）

如果那不是 select 元素，则您的代码中还有另一个更具体的 css 规则，因此您必须增加 css 规格，例如通过写作（注意 spaces 和 "not-spaces"...）：

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

Answer 2

或者尝试将 id 添加到 header :)

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

Answer 3

问题在于选择器简单使用

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

“@media”不会影响我的超大屏幕 header

'@media' doesn't affect my Jumbotron header

html

css

media-queries

twitter-bootstrap