是否可以用 vw 计算 css 的学位？

Question

我正在尝试让我的 Skew 响应视图宽度。

$SkewXBar: calc(5deg + 10vw);

我已经在网上搜索过了，但没有找到关于用 vw 计算学位的内容。

如果有人知道替代方案，我很乐意知道。

Answer 1

一个快速的想法。最简单的方法是使用 JavaScript 逻辑。类似于以下内容：

function calculate() {
  const deviceWidth = screen.width;
  const viewportWidth = window.innerWidth;
  const currentRatio = viewportWidth / deviceWidth;
  const angle = currentRatio * 360;
  document.querySelector('.rotating-bar').style.transform = `rotate(${angle}deg)`;
}

window.addEventListener('resize', calculate);

... 假定 HTML 结构如下：

<div class="rotating-bar">
  This rotates
</div>

https://codepen.io/baadaa/full/MWYMLwE

处的 CodePen 示例