无媒体查询实现HTML CSS响应式时calc属性失效问题排查

问题根因 #

核心是calc()表达式存在语法错误：你代码中calc((480px — 100%) * 480)里的—是全角长破折号，并非CSS语法要求的标准半角ASCII减号-，导致整行width属性被浏览器直接忽略，你预设的宽度计算逻辑完全失效。

失效后纵向堆叠的原因 #

width属性被忽略后，你设置的min-width、max-width规则失去了判断基准，inline-block元素的宽度表现符合默认规则：
三个div没有内容填充的情况下，实际渲染宽度会占满父容器可用空间，因此始终纵向堆叠，达不到你预设的响应式效果。

修正方案 #

将所有calc表达式里的长破折号替换为标准半角减号即可，注意calc内的运算符前后必须保留空格，修正后的CSS代码如下：

.div1 {
  display: inline-block;
  min-width: 33%;
  max-width: 100%;
  width: calc((480px - 100%) * 480);
  background-color: blue;
  height: 100px;
}
.div2 {
  display: inline-block;
  min-width: 33%;
  max-width: 100%;
  width: calc((480px - 100%) * 480);
  background-color: green;
  height: 100px;
}
.div3 {
  display: inline-block;
  min-width: 33%;
  max-width: 100%;
  width: calc((480px - 100%) * 480);
  background-color: orange;
  height: 100px;
}

修正后即可达到预期效果：

• 窗口宽度大于480px时，calc计算得到的width为负值，min-width: 33%生效，三个div各占1/3宽度横向排列
• 窗口宽度小于480px时，calc计算得到的width为正值且超过100%，max-width: 100%生效，每个div占满整行纵向排列

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