Media Queries修改宽度失效，JS计算器响应式适配问题求助

不生效的核心原因 #

• 使用了已废弃的min-device-width/max-device-width属性：这类属性匹配的是设备物理屏幕宽度，而非浏览器可视区域宽度，桌面端调整窗口大小、移动设备存在像素比的场景下都不会正常触发，当前W3C标准推荐使用min-width/max-width匹配视口宽度。
• 缺少移动端响应式必要的视口配置：如果HTML头部没有添加viewport meta标签，移动设备会默认以980px等桌面宽度渲染页面，媒体查询的宽度判断基准会完全错位。
• 样式优先级/顺序问题：如果媒体查询代码写在默认.calculator样式的前面，或者默认宽度规则用了更高优先级的选择器，都会导致媒体查询的样式被覆盖。
• 宽度设置不符合需求逻辑：你当前设置小屏下宽度为60%，如果默认大屏下的.calculator宽度本身就大于60%，反而会出现小屏宽度更小的问题，和你“小屏增大宽度保证按钮展示”的需求相悖。

修复步骤 #

1. 先在HTML的<head>标签中添加视口配置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 替换媒体查询的属性，同时调整宽度值匹配你的需求（比如小屏设为90%，比大屏默认值更大），并且确保媒体查询代码写在默认.calculator样式的后面：

/* 这里是你原来的默认.calculator样式，比如大屏下宽度是40%之类的 */
.calculator {
  width: 40%;
  /* 其他原有样式 */
}

/* 媒体查询写在默认样式后面 */
@media screen and (min-width: 320px) and (max-width: 630px) {
  .calculator {
    width: 90%; /* 按需调整为比默认值更大的比例，保证按钮完整展示 */
  }
}

3. 如果还是不生效，可以临时加!important测试是否是优先级冲突：width: 90% !important;，确认是优先级问题后再调整选择器权重或者样式顺序即可，不要长期使用!important。

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