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

【问题标题】：Is it possible to calculate a degree in css with vw?是否可以用 vw 计算 css 的学位？
【发布时间】：2020-05-17 12:18:47
【问题描述】：

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

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

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

如果有人知道替代方案，我很高兴知道。

【问题讨论】：

如果我们暂时忘记 CSS，你会如何定义 Degree 和 vw 之间的关系？
也分享你的用例，因为我很确定这是一个 X/Y 问题，而你正在寻找错误的方法来解决它
scew() 仅接受 deg，即多边形中的 360 个 deg...vw 是长度——苹果和橙子。你的意思是只使用像calc(5deg * 110%) 这样的百分比而不是 vw？

标签： css sass skew degrees css-calc

【解决方案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 示例

【讨论】：