Question

我正在尝试html / css并尝试学习它们。但是我有一个关于计算盒子大小的小问题。

我试图以px为单位来理解它们，并且所有的东西加在一起，但是当我切换到vh，vw时，出现了一些非常规的happerens，我不知道为什么。

因此，如果您能向我解释发生了什么，我将非常着迷。

谢谢。

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="bir">
        <h1> Alper </h1>
    </div>
</body>

</html>

body {
    background-color: red;
}

.bir {
    background-color: pink;
    height: 20vh;
    font-size: 10vh;
}

.bir h1 {
    background-color: grey;
    padding: 5vh 0;
    width: 100vw;
}

As you can see there is some overflow of the

Answer 1

VH / VW是窗口尺寸的百分比，这在创建自适应设计时最好使用，因为它省去了为较小屏幕调整像素值的麻烦

vh =窗口高度的百分比。因此80vh =屏幕总高度的80％。

vw =窗口宽度的百分比。因此80vw =屏幕总宽度的80％。

％=父容器的百分比。因此height:50%;将是父母身高的50％

如何计算我的代码中的框大小？

1 个答案: