媒体查询在 React 中不起作用
Posted
技术标签:
【中文标题】媒体查询在 React 中不起作用【英文标题】：Media query not working in React 【发布时间】：2017-12-14 23:25:33 【问题描述】：当屏幕/视口的宽度超过 900 像素时，我试图隐藏图像。出于某种原因，这在一个非常基本的示例中不起作用。
我的页脚有一个非常简单的组件——它是功能性的，没有状态或方法，它只嵌套在 Main 组件下。
我在组件中包含了页脚的样式，因此它已完全本地化。出于某种原因，在这个最基本的示例中，@media 似乎不起作用。
当我打开 Chrome 开发工具时，我确实看到媒体查询在适当的断点处附加到我的元素，但即使我的屏幕宽度远远超过 900 像素，也没有应用样式。我的媒体查询中声明的样式被划掉了。所以我的元素是选择保持原始样式并出于某种原因阻止媒体查询。如果我在媒体查询中添加原始类中尚不存在的样式，则会应用它。
我在 index.html 的 head 中包含以下内容
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
我也在使用 React Router（如果这有什么不同的话）。
React 是否会阻止媒体查询工作？我在某个地方犯了一个非常愚蠢的错误吗？
这是我的组件 - 带有 className 'logo' 的 div 是我想要切换的：
import React from 'react';
import Link from 'react-router-dom';
import './footer.component.css';
function Footer(props)
return (
<div className="footer">
<span className="column">
<div className="social-column-container">
<img className="logo" src="./images/logo.jpg" title="kimbyarting logo" />
<div className="social-icon-container">
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
</div>
</div>
</span>
</div>
);
export default Footer;
这是相关的 CSS：
/* Small desktop */
@media only screen and (min-width: 900px)
.footer
.column
.social-column-container
.logo
display: none;
/* Mobile */
.footer
.column
.social-column-container
.logo
width: 100px;
height: auto;
display: inline-block;
margin-left: 50px;
非常感谢任何帮助！
更新
如果常规类定义和媒体定义具有相同的类层次结构，则媒体样式总是被覆盖。但是，如果常规定义定义的类层次结构更少，则此方法有效。
我已经确认，通过删除所有父“显示”样式，似乎没有其他类立即导致样式被覆盖。
什么是覆盖样式？当我遵循最佳实践并为 CSS 类定义了良好的层次结构时，为什么会发生这种情况？
【问题讨论】：
将您的“移动”样式放在媒体查询上方。 这能回答你的问题吗？ Why are my CSS3 media queries not working on mobile devices? 【参考方案1】：用 css 代码做出反应不是问题。如果您应用两条规则碰撞相同的元素，它将选择最后一个声明的规则。因此，将@media 查询放在 css 页面的末尾。即
.footer
.column
.social-column-container
.logo
width: 100px;
height: auto;
display: inline-block;
margin-left: 50px;
@media only screen and (min-width: 900px)
.footer
.column
.social-column-container
.logo
display: none;
【讨论】：
您，先生，是个传奇。不知何故，我从来没有遇到过这个问题，或者以前见过这个规则。谢谢！ 我遇到了同样的问题，但我使用的是 scss，应该没有嵌套问题。这对我不起作用。字体大小在 Chrome DevTools 中的正确断点处显示为变化，但变化发生在更宽的屏幕宽度上。更改发生的次数正确，但不是在正确的时间。但是，媒体查询在 Safari、Firefox 和 Edge 中可以正常工作。所以这绝对是一个 Chrome 问题和一个错误。它肯定与 Chrome 中的 React 有关。当我使用网格并有列和行时，这并没有发生。 您可以做的一件事是链接此问题并打开一个新问题并在那里说，这没有帮助。这会得到更多的关注，你会得到更详细的回答。你面临的问题当然是风格压倒一切。如果不看看你的 css 和 react 代码的样子，我就忍不住了。 你拯救了我的一天。 我的家伙！！挽救这一天【参考方案2】：从 ReactJS 的角度来看，我遇到了一些问题，但结果是 Chrome 的问题。
对于未应用您的 CSS 媒体查询的特定于 Chrome 的问题（而不是上面回答的问题），请将其添加到您的 <head> 部分。
<meta name="viewport" content="width=device-width,initial-scale=1">
【讨论】：
帮我修好了！干杯！ 遇到了同样的问题。这是罪魁祸首。 优秀。我到处寻找这个问题。非常感谢。【参考方案3】：我遇到了同样的问题，但是在将媒体查询放在所有 CSS 代码下方之后，它运行顺利。这是因为当您将样式应用于相同的元素时，CSS 会选择最后声明的代码。
【讨论】：
以上是关于媒体查询在 React 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章