使用普通 CSS 的视口对角线长度

发布于08月17日

我的目标是创建一个绝对定位的圆，半径等于视区的(sv*)对角线长度.

我try 使用毕达哥拉斯定理根据宽度和高度计算视区的对角长度，如下所示:

.circle {
    --radius: sqrt(calc(calc(100svw * 100svw) + calc(100svh * 100svh)));
    ...
}

但这失败了，因为在calc乘法中，至少有一个参数必须是数字.

我知道用JavaScript可以计算出视区的对角线长度，但用普通的css可以吗？

推荐答案

一种简单的替代方法是将视口宽度和高度相加，并将其用作半径.

const toggle = () => {
  document.querySelector('.d1').classList.toggle('big')
  setTimeout(toggle, 4000)
}
setTimeout(toggle, 1000)

body {
  margin: 0;
}
.d1 {
  width: 10px;
  aspect-ratio: 1/1;
  background: red;
  border-radius: 9999px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 2s ease-in-out;
}
.big {
  width: calc(100vh + 100vw);
  background: blue;
}