如何计算一个数字并将其转换为 vw 或 vh？

Question

我对编程还比较陌生，运行遇到了一个问题。我想计算一个数字，把它变成一个视口单位。

我想做的计算是 100 / height * width 并且这个等式得出的数字应该在视口单位中。宽度和高度是我的代码中的预定义变量我试过将等式放在所有类型的括号中，我试过将视口单位放在等式中，如下所示：100vw / width = height。但是一切都给我一个错误。

完整部分：

if (h / height > w / width) {
   container.style.width = [100 / width * height]vw;
   container.style.height = 100vw;
}

container.style.width = [100 / width * height]vw;

和

container.style.width = 100vw / width * height;

请在 javascript 中告诉我这是否可行。我不熟悉 jquery，所以 jquery 的答案对我没有帮助。我愿意学习如何在 css 中计算类似的东西，但我不知道如何实现 if 语句。提前致谢！

Answer 1

假设您的 width 和 height 变量包含数字，请先进行数学运算，然后附加字符串 "vw":

container.style.width = (100 / width * height) + "vw"

Answer 2

首先检查正确的语法是否适用于您想要实现的目标。

if (h / height > w / width) {
   container.style.width = (100 / width * height) + 'vw';
   container.style.height = '100vw';
}

如果您能提供更多信息，说明您如何确定 'pre-defined variables' vw 和 vh。

如果你想找出哪个是 bigger/smaller，你可以直接使用 vmin 和 vmax。

Answer 3

CSS 在 JavaScript 中被视为一个字符串，所以你必须有引号才能工作。在您的 container.style.width 和 container.style.height 中，您都需要将值设为字符串。有两种方法可以做到这一点。

首先，你可以保持原来的样子，但是把它变成一个计算+一个字符串：

if (h / height > w / width) {
    container.style.width = (100 / width * height) + "vw";
    container.style.height = "100vw";
}

或者您可以创建一个变量并在后面追加字符串：

if (h / height > w / width) {
    var width = (100 / width * height);
    container.style.width = width + "vw";
    container.style.height = "100vw";
}

如何计算一个数字并将其转换为 vw 或 vh？

How to calculate a number and turn it into vw or vh?

javascript

css

viewport

viewport-units