如何通过纯CSS提取带单位数值的纯数字？解决单位运算与转换问题

定义CSS变量:root {--maxWidth: 100px;}后，尝试用calc(100vw / var(--maxWidth))计算视口宽度和该值的比例时会失效——因为带单位的数值无法直接做除法运算，哪怕单位一致。

虽然可以通过变量省略单位（比如:root {--maxWidth: 100;}）解决这个例子，但想知道无法省略单位时的处理方案。

更具体的需求是：获取1vw与1px的转换比例，这样就能用px值编写代码后，通过transform: scale(var(--horizontalRatio), var(--verticalRatio))实现内容完美适配视口——这需要实现像素和视口单位的转换。

目前有个变通方案：把所有像素尺寸写成calc(100vw * X/var(--maxWidthInPx))，其中X是元素的像素尺寸，--maxWidthInPx是纯数字的静态最大宽度值。但这个方法需要在每个元素上重复写公式，没法只在一处完成缩放。

已经找到不少JavaScript方案，但需要纯CSS实现。

方法1：单位除法提取纯数值（限同单位场景） #

如果变量的单位是px，可以通过除以1px剥离单位得到纯数值：

:root {
  --maxWidth: 100px;
  --maxWidthValue: calc(var(--maxWidth) / 1px); /* 结果为纯数字100 */
}

.element {
  /* 用纯数值重新组合带单位值，再做比例计算 */
  --horizontalRatio: calc(100vw / (var(--maxWidthValue) * 1px));
  transform: scale(var(--horizontalRatio));
}

核心逻辑是：相同单位的数值相除会得到纯数字，再用这个数字乘以单位就能还原成可计算的带单位值。

方法2：拆分数值与单位（长期维护友好） #

如果必须保留带单位的变量，建议提前把数值和单位拆成两个独立变量：

:root {
  --maxWidthValue: 100; /* 纯数值 */
  --maxWidthUnit: px;   /* 单位 */
  --maxWidth: calc(var(--maxWidthValue) * var(--maxWidthUnit)); /* 组合成带单位的变量 */
}

.element {
  --horizontalRatio: calc(100vw / (var(--maxWidthValue) * 1px));
  transform: scale(var(--horizontalRatio));
}

这种方式既保留了带单位的变量供其他场景使用，又能随时拿到纯数值做比例计算，不用在各处重复写复杂公式。

方法3：直接推导缩放比例（适配场景最优解） #

针对你要实现的px转视口单位、整体缩放的需求，可以直接基于设计稿宽度计算全局缩放比例：

:root {
  --designWidth: 1920; /* 设计稿的宽度（纯数字，比如1920px的设计稿就写1920） */
  --scaleRatio: calc(100vw / (var(--designWidth) * 1px));
}

/* 给容器添加缩放，内部所有px尺寸都会自动适配 */
.page-container {
  transform: scale(var(--scaleRatio));
  transform-origin: top left; /* 确保缩放从左上角开始，避免偏移 */
}

这样只需要给最外层容器加一次样式，内部所有用px定义的元素都会自动按视口比例缩放，完全不用逐个修改元素尺寸。

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