如何将百分比定义的圆形宽度转为像素并同步高度（多设备适配）

我懂你的烦恼——用screen.availWidth计算高度的方式太僵化了，它只取了屏幕初始的可用宽度，完全没考虑窗口缩放、父容器变化或者移动端的适配场景。下面给你两种靠谱的解决方案，从简单高效到兼容旧浏览器都覆盖：

方案一：用CSS aspect-ratio 属性（推荐） #

现代浏览器都支持这个属性，直接让元素的宽高比保持1:1，不用写任何JS，最省心：

.circular-button {
  width: 10%;
  aspect-ratio: 1 / 1; /* 强制宽高相等 */
  border-radius: 50%; /* 确保是圆形 */
  /* 可按需添加按钮样式，比如背景色、边框、字体等 */
}

创建按钮时只需要添加这个类：

var mainButton = document.createElement("button");
mainButton.classList.add("circular-button");
document.body.appendChild(mainButton);

这样不管窗口怎么缩放、在什么设备上，按钮的高度都会自动等于它的宽度，完美适配所有场景。

方案二：用JS监听元素尺寸变化（兼容旧浏览器） #

如果需要支持不支持aspect-ratio的旧浏览器（比如IE），那就用ResizeObserver来监听按钮的实际宽度变化，动态调整高度：

var mainButton = document.createElement("button");
mainButton.style.width = "10%";
mainButton.style.borderRadius = "50%";
document.body.appendChild(mainButton); // 必须先添加到DOM，才能获取实际渲染尺寸

// 封装设置高度的函数
function setButtonHeight() {
  mainButton.style.height = mainButton.offsetWidth + "px";
}

// 页面加载时初始化高度
setButtonHeight();

// 用ResizeObserver监听按钮尺寸变化
const observer = new ResizeObserver(() => {
  setButtonHeight();
});
observer.observe(mainButton);

// 兼容不支持ResizeObserver的浏览器，补充窗口resize监听（精度稍弱）
window.addEventListener('resize', setButtonHeight);

为什么你的原代码失效？ #

• screen.availWidth是整个屏幕的固定可用宽度，不是按钮所在容器的宽度，也不会随窗口缩放变化；
• 你没有把按钮添加到DOM中，此时按钮还未渲染，获取的尺寸是不准确的；
• 只计算了一次高度，窗口变化后按钮宽度已改变，但高度还是初始值，自然会变形。

内容的提问来源于stack exchange，提问作者GoofBall101