Media查询无法正常更改宽度

Question

我正在制作这个JS计算器项目，我想使其响应。但它并没有正常工作。当屏幕变小时，我想使.calculator的宽度稍微大一些，因为这样所有按钮都可以正确显示(特别是操作符)。
这是我工作过的代码:https://codepen.io/tanjimanim/pen/jOwoYrV?编辑= 0110

和我写的媒体查询。

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

Answer 1

在你的CSS中使用这段代码:

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

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

看一下这个截图

Answer 2

min-width工作，如果范围超出指定的px值，max-width在指定的范围内工作。

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

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

在显示尺寸大于320px时有效，可根据需要更改宽度

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

Answer 3

device-width属性已被弃用，所以请使用min-width代替。你可以在MDN上阅读

所以改变

• min-device-widthtomin-width
• max-device-width到max-width

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