Question

你好，我几天前才刚刚开始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>

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

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

永远谢谢您。

Answer 1

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

如果未选择该元素，则代码中还有另一个更特定的css规则，因此您必须提高css的特异性，例如通过编写（请注意空格和“非空格” ... ）：

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

Answer 2

或者尝试将id添加到标题中：）

<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'不会影响我的Jumbotron标头

3 个答案: