javascript - 如何在 CSS 中将元素的宽度设置为等于高度的 10%？

Question

我希望我的元素是一个正方形。我希望这个元素正方形的边长是屏幕/窗口高度的 10%。然而，我不知道该怎么做。这是我的代码:

.Element {

width: /*How can I make the width equal to: [height: 10%]?*/;
height: 10%;
/*I wanted the element to be a square with a side length of [height: 10%].*/

}

Answer 1

您可以使用视口(viewport)百分比长度来获得您想要的效果。

vh 单位长度基于视口(viewport)/屏幕高度的 1%，我认为这是您想要的。

或者，vw 单位长度基于视口(viewport)/屏幕宽度的 1%。

您可以选择其中一个，只需为 width 和 height 使用相同的长度单位即可。

最后，您还可以尝试使用 vb 和 vi 长度单位。

参见:https://developer.mozilla.org/en-US/docs/Web/CSS/length

.makeSquare {
  background-color: yellow;
  width: 10vh;
  height: 10vh;
}

<div class="makeSquare"></div>
<p>This is a square.</p>