Question

当屏幕/视口的宽度超过900像素时，我试图隐藏图像。出于某种原因，这不是一个非常基本的例子。

我的页脚有一个非常简单的组件 - 它的功能，没有状态或方法，并且它只嵌套在主要组件下。

我在组件中包含了页脚的样式，因此它已完全本地化。出于某种原因，在这个最基本的例子中，@ media似乎并没有起作用。

当我打开Chrome devtools时，我确实看到媒体查询在适当的断点处附加到我的元素，但即使我的屏幕宽度超过900px，也没有应用样式。在我的媒体查询中声明的样式被划掉。所以我的元素是选择保持原始样式并出于某种原因阻止媒体查询。如果我在媒体查询中添加原始类中尚未存在的样式，则会应用该样式。

我在index.html

中包含以下内容

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

我也使用React Router（如果这有任何区别）。

React是否阻止媒体查询工作？我在某个地方犯了一个非常愚蠢的错误吗？

这是我的组件 - 带有className＆＃39; logo＆＃39;的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;
}

非常感谢任何帮助！

更新

如果常规类定义和媒体定义具有相同的类层次结构，则始终会覆盖媒体样式。但是，如果常规定义定义了更少的类层次结构，则此方法有效。

我已经确认，删除所有父母＆＃39;显示＆＃39;样式，没有其他类似乎立即导致样式覆盖。

什么是最重要的风格？当我遵循最佳实践并为CSS类定义了良好的层次结构时，为什么会发生这种情况？

Answer 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;
   }
 }

Answer 2

我遇到了同样的问题，但是在将媒体查询放在所有CSS代码的下面之后，它运行正常。这是因为当您将样式应用于相同的元素时，CSS会选择最后声明的代码。

Answer 3

从ReactJS的角度来看，我遇到了一些问题，但事实证明这是Chrome的问题。

对于未应用CSS媒体查询的特定于Chrome的问题（而不是上面回答的问题），请在您的<head>部分中添加。

<meta name="viewport" content="width=device-width,initial-scale=1">

媒体查询在React

3 个答案: