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

【问题标题】：How to calculate a number and turn it into vw or vh?如何计算一个数字并将其转换为 vw 或 vh？
【发布时间】：2019-04-18 18:01:11
【问题描述】：

我对编程比较陌生，但遇到了问题。我想计算一个数字并将其转换为视口单元。

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

全文：

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 语句。提前致谢！

【问题讨论】：

标签： javascript css viewport viewport-units

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

如果您能提供更多关于如何确定 vw 和 vh 的“预定义变量”的信息。

如果你想找出哪个更大/更小，你可以直接使用 vmin 和 vmax。

【讨论】：

【解决方案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";
}

【讨论】：