【发布时间】：2017-01-27 19:26:36
【问题描述】：
我想知道如何在所有设备上保持元素的大小（例如立方体）。当您调整浏览器窗口的大小时，元素将保持相同的“形式”，但会变小。我的意思是，当您水平调整浏览器窗口的大小时，元素（f.ex 立方体）将保持相同的“形式”。所以它不会比高更宽。
我知道我必须在 with 和 height 上使用百分比而不是 px。但是当我这样做时，元素当然仍然是当前设备或屏幕的百分比。我很不擅长描述，所以我将给出一个 示例：当我在学校用 HTML 和 CSS 制作计算器时，它非常适合屏幕。但是学校的屏幕是正方形的（宽度与高度相同）。家里的屏幕是矩形的（宽度与高度不同）。所以家里的计算器太宽了。你现在明白了吗？如果你没有请告诉我。
这是它在我的屏幕主页上的样子：Full sized browser window home 窗口宽度已调整为更小：Smaller in width browser window at home
很抱歉描述不好......还有英语。
【问题讨论】：
-
你的代码在哪里？
-
听起来你的意思是“保持相同的纵横比”而不是“保持相同的大小”。没有MCVE 很难分辨，但您始终可以使用
width: calc(50vh - 100px);和height: calc(50vh - 100px);之类的东西将事物的宽度和高度基于视口高度。 -
好的，谢谢保罗。这是我的CSS：。
calcBg{ background-color: #ebebeb; height: 62.5%; width: 30%; position: fixed; top: 15%; left: 36.5%; }