你好,我几天前才刚刚开始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;
}
}
永远谢谢您。
答案 0 :(得分:1)
选择器#headerh1 {...}
应该为header h1 {...}
(除了标签,没有ID,header
和h1
之间的空格)
如果未选择该元素,则代码中还有另一个更特定的css规则,因此您必须提高css的特异性,例如通过编写(请注意空格和“非空格” ... ):
header.text-white div.jumbotron.bgimg.text-white h1.display-4 { ... }
答案 1 :(得分:0)
或者尝试将id
添加到标题中:)
<header id="headerh1" class="text-white">
答案 2 :(得分:0)
问题与选择器简单使用
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