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