javascript - 根据屏幕尺寸缩放多个元素

Question

我正在尝试为我的机器人比赛制作一个战术板。所述板包含一个免费 ( <img src="board.jpg" style="width:100%; height: relative"></img>) 和几个其他部分，用户可以使用按钮四处移动。但是，我想将此缩放到手机大小。背景有，但元素没有。我无法将元素设置为 % 高度，因为它们是用margin-topand布局的margin-left，因此较小的元素不会产生影响。

我如何设置它，以便所有元素以及它们所在的边距根据屏幕尺寸减少和增加。

提前谢谢你的帮助。

标签： javascripthtml

Answer 1

您可以在元素的样式中使用vw和vh单位，它会根据视口调整它们的大小。

element {
    height: 50vh;
    width: 50vw;
}

适用于所有现代平台。

https://caniuse.com/#feat=viewport-units