如何通过CSS动态计算zoom值适配超高分辨率屏幕？

纯CSS方案：用视口单位直接计算 #

CSS没法直接把视口宽度存为自定义变量参与计算，但可以用vw单位直接实现动态缩放。假设你的设计稿基准宽度是1920px（全高清屏），当屏幕宽度超过2560px时，按比例放大内容：

@media (min-width: 2560px) {
  body {
    /* 缩放比例 = 当前视口宽度 / 设计基准宽度，保证视觉比例和设计稿一致 */
    zoom: calc(100vw / 1920);
    /* 可选：限制最大缩放比例，避免内容过大 */
    max-zoom: 150%;
  }
}

JS+CSS方案：动态设置自定义变量 #

如果需要基于实际可用宽度计算，用JS获取窗口宽度后给根元素设置--width变量，再在CSS里调用：

// 初始化+监听窗口 resize 事件
function updateViewportWidth() {
  const currentWidth = window.innerWidth;
  document.documentElement.style.setProperty('--width', `${currentWidth}px`);
}
updateViewportWidth();
window.addEventListener('resize', updateViewportWidth);

对应的CSS代码：

@media (min-width: 2560px) {
  body {
    /* 以2560px为基准，超过后按比例放大，可根据需求调整公式 */
    zoom: calc(var(--width) / 2560);
    /* 可选：设置缩放范围 */
    min-zoom: 100%;
    max-zoom: 150%;
  }
}

兼容性替代方案 #

如果遇到zoom属性不支持的浏览器（比如Firefox），可以用transform: scale()替代，注意要修正定位和宽度问题：

@media (min-width: 2560px) {
  body {
    transform: scale(calc(100vw / 1920));
    transform-origin: top left;
    /* 修正缩放后body宽度异常的问题 */
    width: calc(1920px * (1920 / 100vw));
  }
}

额外提醒 #

优先用弹性布局（比如max-width+百分比、rem单位）适配超大屏，缩放只是补充方案，避免过度依赖导致布局错位。

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