Question

最近，我一直在制作网站模板或练习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>

非常感谢您的帮助！

Answer 1

使用Viewport Width或Viewport Height

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

或

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

Answer 2

如果要对元素的字体大小使用百分比，则这与html中定义的字体大小有关。因此，即使窗口大小发生变化，您的字体大小也会继续保持相同的大小。 html的常见字体大小为16px，因此，如果您将h1与font-size: 200%一起使用，则不管窗口大小如何，h1 font-size都将具有32px。

要随着窗口宽度的变化而改变字体大小，请使用vw。这样，您的字体大小就会变得动态。

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

1vw ==宽度的1％。

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

2 个答案: