Question

我不是一个程序员（很快就会变得很明显），但我正在为一个工作项目做点工作，而且我一直坚持到最后一点。

我需要在比例尺中添加一个calc（），但它只是不起作用。我没有深入了解为什么需要这个，我知道通常会有更好的方法来实现我想要实现的目标，但我只想知道如何以我需要的方式工作

我希望Transform：Scale（）适应相对于视口大小的大小。我会从我的研究中假设我使用100vw和我的其他工作添加了一个calc（）函数。

我已经把我所处的位置放在了比标尺功能低得多的地方，因为0-1的个别值会将比例变为100％。 Calc（）函数与基本总和一起正常工作，即10 - 5给出5和500％变焦的值但是一旦我加100VW它就停止工作请求帮助！

body {

margin: 0;
padding: 0;
width: 100vw;
text-align: center;

}

#wrap {  
    width: 1535;
    height: 900;
    padding: 0;
    overflow: hidden;

}

#frame {
    width: 1535;
    height: 900;
    overflow: hidden;
    -webkit-transform: scale(calc(100vw/1535));
    -webkit-transform-origin: 0 0;

}

Answer 1

这里有两件事。

您的#wrap和#frame需要在宽度上设置某种单位。因此，您可以相对于视口更改大小。例如，如果您希望它们在视口宽度为1920px时宽度为1535px，但您希望它们在视口缩小时保持该比率，请将它们设置为79.947917vw宽。（1535/11920 = 0.79947917）。你也可以做同样高度的事情。
规模转换不需要单位。标度采用无单位数，作为元素原始大小的倍数。因此scale(2)是正常的两倍，或scale(0.5)是正常的一半。您还可以使用两个数字来不同地调整元素的宽度和高度。例如，scale(2, 3)会使元素增长到原始宽度的两倍，并且是原始高度的三倍。

由于变换是相对于元素而不是文档，这意味着您不需要在变换表达式中使用任何类型的calc，因为随着视口缩小和增长，元素本身会缩小并增长也会导致缩放量缩小并按比例增长。