Ada*_*dam 3 css css3 media-queries reactjs
我想在屏幕/视口宽度超过900px时隐藏图像.出于某种原因,这不是一个非常基本的例子.
我的页脚有一个非常简单的组件 - 它是功能性的,没有状态或方法,它只嵌套在Main组件下.
我在组件中包含了页脚的样式,因此它已完全本地化.出于某种原因,在这个最基本的例子中,@ 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'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类定义了良好的层次结构时,为什么会发生这种情况？
Flo*_*oor 12
与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;
}
}
小智 10
从 ReactJS 的角度来看，我遇到了一些问题，但结果证明是 Chrome 的问题。
对于未应用 CSS 媒体查询的 Chrome 特定问题（而不是上面回答的问题），请在您的<head>部分中添加此内容。
<meta name="viewport" content="width=device-width,initial-scale=1">