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

【问题标题】：Why cant I make percentages work for font-size为什么我不能让百分比适用于字体大小
【发布时间】：2019-02-13 21:31:48
【问题描述】：

最近，我一直在制作网站模板或练习 CSS。有一个反复出现的问题，即百分比没有做任何事情，而是设置了一个字体大小，当我更改窗口大小时它不会改变。我已经尝试过在这个网站上的每个帖子来修复百分比，但我不知道如何修复这个字体大小。这是我的代码：

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>

非常感谢您的帮助！！！

【问题讨论】：

百分比是字体大小的百分比。如果字体大小为 12pt，则 100% 将是 12pt。 '1em' 也一样
您可以使用 'vw' 在此处查看最佳答案：stackoverflow.com/questions/16056591/…
您正在尝试更改 h1 的大小，包括 H1-H6 在内的所有文本都有特定的 font-size ，当您尝试使用 % 更改字体大小时，例如 h1 hvae font-size of 26px ，当你在 % 中使用 font-size 时，它会上升到 26px ，如果你将 font-size 设置为 200% ，那么 font-size 将是 52px;
@PankajJaiswal 不，它是相对于父元素的大小。如果 H1 通常是 26px，那么给它 font-size:100% 会使它出来 13px。

标签： html css percentage

【解决方案1】：

如果您对元素的字体大小使用百分比，这与html 中定义的字体大小相关。因此，即使窗口大小发生变化，您的字体大小也会保持相同的大小。 html的常用字体大小是16px，所以如果你有一个h1和font-size: 200%，不管窗口大小，h1 font-size都是32px。

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

像这样：h1 { font-size: 15vw }。这意味着如果窗口宽度为 200 像素，您的字体大小将有 30 像素； 100vw == 100% 宽度

1vw == 宽度的 1%。

【讨论】：

【解决方案2】：

使用Viewport Width 或Viewport Height

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

或

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

【讨论】：

这并没有回答标题中的问题。为什么百分比不起作用？