html - 仅使用 CSS 设置宽度等于高度

Question

我正在尝试设计一个左上角带有按钮的移动网站，该按钮设置为父对象的 100% 高度。 宽度应该与高度相同，但我只找到了JS或JQuery的解决方案。我喜欢这样的东西:

.hamburger {
    height: 100%;
    width: height;
}

Answer 1

解决方案是视口(viewport)的 9% 高度与 9vh 匹配。父级为视口(viewport)高度的 9%，子级为父级高度的 100%。要成为一个完美的正方形，请将宽度设置为 9vh。 1vh 等于视口(viewport)高度的 100. 部分。所以现在您可以将视口(viewport)缩放到任意大小，并且始终保持一个正方形。