媒体查询无法正常更改宽度答案

【问题标题】：Media Queries not working properly to change the width媒体查询无法正常更改宽度
【发布时间】：2021-12-11 12:40:07
【问题描述】：

我正在制作这个 JS 计算器项目，我希望它具有响应性。但它并不完全正常工作。当屏幕变小时，我想使 .calculator 的宽度稍大一些，因为这样可以正确显示所有按钮（尤其是操作员按钮）。
这是我工作过的codepen：https://codepen.io/tanjimanim/pen/jOwoYrV?editors=0110

还有我写的媒体查询。

@media screen and (min-device-width: 320px) and (max-device-width: 630px) {
  .calculator {
    width: 60%;
  }
}

【问题讨论】：

标签： html css

【解决方案1】：

在您的 CSS 中使用此代码部分：

@media screen and (min-width: 320px) and (max-width: 630px) {
  .calculator {
    width: 60%; 
  }
  button
  {
    padding:16px 0px;
  }
}

device-width 已被弃用。并在所有移动设备上显示所有operator buttons，从选择器button 中删除左右填充。

Have a look in this screenshot

【讨论】：

【解决方案2】：

如果范围超出指定的px 值并且max-width 适用于该指定范围，则min-width 有效。

我认为这是因为您为两种设备大小设置了width:60%。并且您在.calculator 类上使用max-width:45px 属性，因此需要在媒体查询中更改该属性，如果您希望计算器的宽度适合显示尺寸的宽度，您可以删除max-width 的该属性。你应该试试：当显示尺寸在 320px 范围内并根据您的需要更改宽度时工作

@media screen and (max-width: 320px){
  .calculator {
    max-width: 60%;
  }
}

适用于显示尺寸大于 320 像素并根据需要更改宽度

@media screen and(max-width: 320px) {
  .calculator {
    max-width: 60%;
  }
}

【讨论】：

现在这就是我正在寻找的答案。我想知道为什么我的移动显示器上的宽度仍然没有改变。所以我将最大宽度更改为 40%，它起作用了！顺便说一句，不推荐使用 max-device-width，如上一条评论中所述。

【解决方案3】：

设备宽度属性已被弃用，因此请改用min-width。你可以阅读MDN

所以改变

min-device-width 到 min-width
max-device-width 到 max-width

@media screen and (min-width: 320px) and (max-width: 630px) {
  .calculator {
    width: 60%;
  }
}

【讨论】：