Question

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

我要进行的计算是100 /高度*宽度，该等式得出的数字应以视口为单位。宽度和高度是我代码中的预定义变量，我尝试将方程式放在所有类型的括号中，我尝试将视口单位放在方程式中，如下所示：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';
}

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

如果要查找更大或更小的哪个，可以直接使用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？

3 个答案: