能否获取CSS类中width与max-width的差值并用于样式调整？

结论 #

原生CSS、SASS/LESS/Stylus 这类预处理器都无法直接获取并使用width和max-width的运行时差值：

• 预处理器是编译时工具，只会在代码构建阶段把代码转换为原生CSS，无法感知浏览器运行时的容器实际渲染尺寸
• 原生CSS目前没有提供直接计算两个属性差值并用作样式绑定的能力，但可以通过现有特性实现你的需求

方案1：CSS容器查询实现 #

如果你的使用场景只需要判断差值是否达到阈值（比如比基准小10%），直接用CSS容器查询即可实现，不需要额外JS：

/* 定义基础参数 */
.className {
  --base-width: 100mm;
  width: var(--base-width);
  max-width: 100vw;
  /* 声明当前元素为可查询的容器 */
  container-type: inline-size;
}

/* 容器查询：当容器宽度小于90mm（基准值的90%）时，子元素整体缩放 */
@container (max-width: calc(var(--base-width) * 0.9)) {
  .className * {
    transform: scale(0.9);
    /* 可根据布局需要调整缩放原点，默认是中心缩放 */
    transform-origin: top left;
  }
}

目前主流浏览器（Chrome 105+、Firefox 110+、Safari 16+）均支持容器查询特性，无需引入任何额外依赖。

方案2：JS动态计算（兼容性更高） #

如果需要根据差值动态适配任意比例的缩放，用JS配合CSS变量实现更灵活：
CSS部分：

.className {
  width: 100mm;
  max-width: 100vw;
}
.className * {
  transform: scale(var(--child-scale, 1));
  transform-origin: top left;
}

JS部分：

const targetEl = document.querySelector('.className');
// 1mm 对应 3.7795275591px，先把基准宽度转换为像素值
const baseWidthPx = 100 * 3.7795275591;

function updateChildScale() {
  const actualWidth = targetEl.offsetWidth;
  // 计算缩放比例，最大不超过1
  const scale = Math.min(1, actualWidth / baseWidthPx);
  targetEl.style.setProperty('--child-scale', scale);
}

// 窗口尺寸变化时更新缩放值
window.addEventListener('resize', updateChildScale);
// 初始化调用一次
updateChildScale();

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