CSS如何在@media媒体查询的calc()函数中使用var()变量

这不是写法错误，属于CSS规范本身的限制：

1. 媒体查询运行在全局文档上下文，解析时机早于普通DOM元素的样式计算，无法读取挂载在普通DOM节点（比如你写了行内样式的<ul>）上的CSS自定义属性。你在普通选择器中能正常调用var(--buttonCount)，是因为选择器匹配到了对应DOM节点，可以拿到节点上定义的变量；但媒体查询不绑定任何具体元素，只能读取:root/html根节点上全局定义的自定义属性，拿不到<ul>行内的变量值，直接导致calc()计算失败，规则失效。
2. 即便你把--buttonCount定义到根节点，目前主流浏览器对媒体查询条件中使用CSS自定义属性的兼容性也极差，规范层面也没有强制要求支持这种写法，生产环境不要依赖这种逻辑。

完全不需要写依赖变量计算断点的媒体查询，用Flex弹性布局的自适应特性就能实现需求，天然兼容任意数量的按钮，适配所有屏幕宽度：

/* 父级ul样式 */
ul {
  list-style: none;
  margin: 0;
  padding: 0 4px; /* 对应你之前代码里的8px总边距 */
  display: flex;
  gap: 2px; /* 按钮之间的固定间距，对应你之前计算的间距值 */
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
}

/* li按钮样式 */
li {
  /* 核心自适应逻辑 */
  flex: 1 1 0;
  max-width: 40px; /* 大屏下按钮最大宽度，保持你之前的设计尺寸 */
  min-width: 28px; /* 小屏下按钮最小可点击宽度，可根据需求调整，不建议小于24px */
  /* 以下是按钮基础样式，可按需修改 */
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

方案逻辑说明：

• 屏幕宽度充足时，按钮会自动保持40px的固定宽度，按钮间距固定为你设置的gap值，和你之前固定宽度的效果完全一致。
• 屏幕宽度不足、固定40px宽度的按钮无法在单行放下时，按钮会自动等比收缩，直到触达你设置的最小宽度阈值，整个过程不需要任何断点判断，不管按钮数量是多少都能自动适配。
• 你之前在普通样式规则中用--buttonCount实现的其他排版逻辑可以正常保留，不受影响。

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