React中@media only screen and (max-height:1000px)不生效的解决方法

我在React开发动态网页时，尝试使用@media选择器针对1000px网页高度设置样式，但发现该媒体查询未生效，请问应如何解决？

提供的代码 #

HTML

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

CSS

@media only screen and (max-heigth: 1000px) {
  .total-heigth {
    height: 650px;
  }
}

ReactJS

<Card className="overflow-auto total-heigth mb-4">
....
</Card>

解决方案 #

1. 修复拼写错误（最直接原因）

你的CSS和React代码里存在拼写错误：heigth应该是height，这是导致媒体查询不生效的核心问题。

修正后的CSS：

@media only screen and (max-height: 1000px) {
  .total-height {
    height: 650px;
  }
}

修正后的React代码：

<Card className="overflow-auto total-height mb-4">
....
</Card>

2. 其他排查方向

如果修复拼写后仍未生效，可以检查以下几点：

• 样式优先级冲突：如果目标元素有更具体的选择器样式、内联样式，或者第三方UI库（比如你用的Card组件）的默认样式优先级更高，会覆盖媒体查询的样式。可以通过浏览器开发者工具查看元素的样式计算结果，调整选择器权重（比如增加父元素选择器），或临时用!important验证（不推荐长期使用）。
• 媒体查询逻辑是否符合需求：确认你要的是“页面高度≤1000px”时生效（用max-height），还是“页面高度≥1000px”时生效（用min-height），避免逻辑搞反。
• 类名是否正确渲染：在浏览器开发者工具中检查Card元素的class属性，确认total-height确实被添加到了元素上，没有因React条件渲染等逻辑导致类名丢失。
• 清除浏览器缓存：旧的CSS缓存可能导致新样式不生效，按Ctrl+F5强制刷新页面测试。

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