为什么我不能让百分比适用于字体大小

Question

最近在做网站模板或者练习CSS。有一个反复出现的问题，百分比没有做任何事情，但设置了字体大小，当我更改 window 大小时，它不会改变。我在这个网站上尝试 every post 来修复百分比，但我不知道如何修复这个字体大小。这是我的代码：

body{
    background-color: #b74242;
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: 100%;
}


html, body {
    padding: 0;
    margin: 0;
    font-size: 100%;
}

div{
    font-size: 100%;
}

.header{
    background-color: #bc2b2b;
    margin: 0;
    height: 100%;
    max-height: 70%;
    min-height: 70%;
    font-size: 100%;
}

h1{
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 550%;
    color: white;
    margin-top: 10%;
    margin-bottom: 20%;
}

.left{
    float: left;
    font-size: 100%;
}

img{
    margin: 25px;
    max-width: 45%;
    width: 2000px;
    height: auto;
    font-size: 100%;
}

p{
    font-size: 50%;
}

#d{
    margin: 25px;
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed"
            rel="stylesheet">
        <title>Title</title>
    </head>
    <body>
        <div class="header">
            <br>
            <h1>Header</h1>
        </div>
        <img src="Trees.png" class="left"></img>
        <p style="font-size: 100%" id="d">DESCRIPTION</p>
    </body>
</html>

非常感谢您的帮助！！！

Answer 1

使用Viewport Width或Viewport Height

font-size:100vw;（视口的 100% 宽度）

或

font-size:100vh;（视口的 100% 高度）

Answer 2

如果您对元素的字体大小使用百分比，这是相对于 html 中定义的字体大小而言的。因此，即使 window 大小发生变化，您的字体大小也会继续保持相同的大小。 html 的常用字体大小是 16px，所以如果你有 h1 和 font-size: 200%，无论 window 大小如何，h1 font-size 都会有 32px .

要随着 window 宽度的变化而改变字体大小，请使用 vw。这样你的字体大小就变成了动态的。

像这样：h1 { font-size: 15vw }。这意味着如果 window 宽度是 200px 你的 font-size 将是 30px; 100vw == 宽度的 100%

1vw == 宽度的 1%。

为什么我不能让百分比适用于字体大小

Why cant I make percentages work for font-size

html

css

percentage