媒体查询在 React 中不起作用答案

【问题标题】：Media query not working in React媒体查询在 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" alt="kimbyarting logo" 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?

标签： css reactjs media-queries

【解决方案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 会选择最后声明的代码。

【讨论】：