CSS：度量单位(px，em，rem，vw，％等)
2020-3-31
1584
0
Photo by Charles Deluvio on Unsplash
介绍
我决定写这个博客的目的是希望探索更多有关使用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)