是否可以使用 vw 在 css 中计算度数?

Question

我正在尝试使我的 Sskw 响应视图宽度。

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

我已经在网上搜索过了，但找不到任何关于用大众计算学位的信息。

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

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 示例