介绍

我决定写这个博客的目的是希望探索更多有关使用CSS调整大小的方法。 有这么多种可能性，很容易感到不知所措和困惑。 浏览器当前支持16种度量单位：像素，英寸，皮卡，厘米，毫米，点，百分比，em，rem，视口尺寸（vw，vh），ex，ch，Vmax（最大视口）和vmin （viewportmin）在这16个单位中有两类：相对长度和绝对长度。

相对长度

首先要了解相对长度，它们会在其他物体上获得尺寸，这些尺寸在您要设定尺寸的元素之外或相对于它们，例如，父级的尺寸，字体大小和视口尺寸。

百分比

百分比基于其父元素。 因此，如果一个元素为200px * 200px，并且该元素的子元素的宽度为50％，高度为50％，则该子元素的等效尺寸为100px * 100px，因为200px的50％为100px。

在这里，我们有一个名为" parent-box"的div元素和一个名为" child-box"的子div元素。

在css文件中，我将父盒的高度和宽度设置为200px，子盒的宽度和高度设置为50％，这意味着现在子盒将是父盒尺寸的50％，因此 如果父框为200px * 200px，则表示子框为100px * 100px，结果如下：

如您所见，蓝色元素（即子元素）正好是粉红色框（即父元素）的50％。

视口尺寸

当前有四种类型的视口尺寸单位，vw（视口宽度），vh（视口高度），vmin（视口最小）和vmax（视口最大）。 使用这些单位时要知道的第一件事是，它们会自动将浏览器的屏幕划分为100 x 100的不可见网格，网格中的每个正方形或单位将根据情况代表一个vw，vh，vmin或vmax。

vh 与 vw

因此，让我们更深入地研究这两个。 如果我们声明一个元素的宽度为50vw且高度为50vh，我们将看到该元素将恰好占据页面高度的一半，并且占据页面宽度的一半，每个vw或vh现在相当于那个不可见的100 *中的一个单元 100，所以如果我们声明一个元素为50vw，它将是浏览器宽度的一半，下面我们来看一个示例。

在这里，我们看到父元素恰好是浏览器高度和宽度的一半。

vmin和vmax

这些单位比较棘手。 因此，这些单元的工作方式是将使用高度或宽度的最大或最小长度。 例如，让我们声明父框的宽度为50vmax，如果浏览器的宽度为800px，高度为500px，则父框的宽度为400px，因为宽度大于高度，所以 元素将从浏览器的水平部分的不可见网格中获取50个单位，现在，如果高度为1000px，宽度为500px，则父框的宽度现在为500px，因为浏览器的高度现在大于宽度，因此父元素 box将占据浏览器垂直边100平方中的50平方，并使用它来声明父对象的框宽。

现在进入vmin。 假设我们声明父级框的宽度为50vmin，那么从最小视口尺寸开始，父级框的宽度将占据50个网格单位。 同样的示例，如果浏览器的宽度为800px，高度为500px，则父框的宽度现在将为250px，因为我们声明父框的宽度为最小视口尺寸的50个单位， 在这种情况下，是高度。 现在，如果高度为1000像素，宽度为600像素，则父框的宽度现在为300像素，我知道这非常令人困惑，因此让我们回到第一个示例：

Here we declare the width to be 50vmax (50 units out of 100 from the BIGGEST viewport dimension)