如何在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

您可以使用视口百分比长度来获得所需的效果。

vh单位长度基于视口/屏幕高度的1％，我认为这是你所想要的。可选vw单位长度基于视口/屏幕宽度的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>

Answer 2

这应该工作

.Element { 
    width: 20vw; 
    height: 20vw; 
    }