提问人：Deesak 提问时间：10/25/2023 最后编辑：TylerHDeesak 更新时间：10/27/2023 访问量：34
媒体查询对奇怪的值生效
Media queries go into effect on strange values
问：
这是我的媒体查询，因为我试图让我的 React 应用程序响应。
@media screen and (max-height: 800px) {
font-size: 65px;
.shuttleObject{
width: 90%;
}
}
}
问题是，当我尝试在 chrome 的 Web 开发人员控制台中更改高度和宽度时，此代码在以下情况下有效：
宽度：976px 高度：796px
然后当我去的时候
宽度：976px 高度：797px
它不会生效
当我将宽度更改为 977px 时，它再次生效。为什么它会这样工作，我是否可以做些什么来只按照它应该的方式工作，这意味着 <800px = 实际上，> 800 = 不是。
如果我应该提供更多，请告诉我。
答：
3赞
Baljinder Singh
10/26/2023
#1
您只需将所需的 css 属性设置为初始值，然后在屏幕尺寸高度大于 800px 高度时将其相应地更改为初始值。（如上例所示）。
//use this as intial css values.
.demo{
font-size: 65px;
.shuttleObject{
width: 90%;
}
}
//Apply css as per your requirement if height is greater than 800px
@media screen and (min-height:800px) {
/* style changes when the screen gets larger */
}
评论
0赞
Harshsetia
12/13/2023
信息量很大。谢谢
-1赞
Deesak
10/26/2023
#2
我忘了在脑海中添加这一行代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在添加此行之后，它可以正常工作。
下一个：移动设备上的背景图像问题
评论