带有媒体查询的 ReactJs

Question

我正在为 multi-function 站点开发一个基础站点应用程序。所以现在我只开发应用程序所在的响应框架。我希望该页面有一个 header 和 3 列（2 个用于广告的横向列和一个用于应用程序的中间列）。我希望横向列仅出现在 850px 以上的分辨率中。所以我有以下代码：

App.js:

<...imports, etc ...>
function App() {
    return (
        <Router>
            <Navbar />
            <div className='divAds'>
                <VerticalAd />
                <div className='divMiddle' >
                    <HorizontalAd />
                    <div className="App" >
                        <Switch>
                            <Route exact path="/" component={Main} />
                            <Route exact path="/about" component={About} />
                            <Redirect to="/" />
                        </Switch>
                    </div>
                </div>
                <VerticalAd />
            </div>
        </Router>
    )
}

在 VerticalAd 组件中我有：

import React from 'react'
import VerticalSun from '../../img/sun-vert.jpg';
import { Image } from 'semantic-ui-react'
import './verticalAd.scss'

export const VerticalAd = () => (
    <div className='divVad'>
        <Image src={VerticalSun} rounded alt="Vertical Ad" />
        <Image src={VerticalSun} rounded alt="Vertical Ad" />
        <Image src={VerticalSun} rounded alt="Vertical Ad" />
    </div>

创建了这个页面结构：

所以我希望横向列在移动屏幕上消失所以我有以下 css 到 VerticalAd.scss:

.divVad {
    @media (min-width: 850px) {
        display: block;
    }

    @media (max-width: 849px) {
        display: none;
    }
    
    img {
        width: 10em;
        height: 50em;
    }
}

但垂直列不会在较低分辨率下消失。我做错了什么？

我尝试将@media 查询移动到 App.scss 但也没有用。

我正在使用 Chrome 开发人员工具的响应测试对此进行测试。

编辑

问题出在开发者工具上。 ASAI 通过调整整个浏览器的大小来测试它 window 它工作正常。对不起。但无论如何...... @Samathingamajig 的回答很有用，我已经接受了。抱歉给您带来不便。

Answer 1

你写媒体查询的方式是错误的；媒体查询在外面，选择器在里面：

.divVad {
    img {
        width: 10em;
        height: 50em;
    }
}

@media (min-width: 850px) {
    .divVad {
       display: block;
    }
}

@media (max-width: 849px) {
    .divVad {
       display: none;
    }
}

带有媒体查询的 ReactJs

ReactJs with media queries

javascript

media-queries

reactjs