我的一些媒体查询有效，其他的无效，不知道为什么

Question

如标题所述，我有许多媒体查询，但只有一些有效。它们都遵循相同的原则，在一定的屏幕宽度下隐藏一件事并用另一件事替换它。

我正在使用 React.js、Redux、React-Materialize 和 Express.js。下面我包含了所有 3 个相关的代码文件，Nav.jsx、SideNav.jsx 和相关的媒体查询。

Nav.jsx

注意：

关注 className='sidenav' ， className='nav-menu' 什么不起作用 专注于 className='space'、id='nav-title1' 和 id='nav-title2' 的作用

import React, { Component } from 'react';
import { Navbar, NavItem, Row, Col, Dropdown, Button } from 'react-materialize';
import SideNavv from './SideNav.jsx';

class Nav extends Component {
  render() {
    return (
      <Row>
        <div className='blue darken-2 white-text'>
          <a href="#" id='nav-title1' className="nav-title brand-logo white-text">Late File Tax Return Specialists</a>
          <a href="#" id='nav-title2' className="nav-title brand-logo white-text">Late File Specialists</a>
          <nav left className='blue darken-2 white-text' id='nav'>
            <SideNavv className='sidenav'/>
            <Dropdown className='nav-menu' trigger={
                <Col className='blue white-text nav-menu'>About Our Firm</Col>
              }>
              <NavItem className='blue white-text nav-menu'>###-###-####</NavItem>
              <NavItem className='blue white-text nav-menu'>email</NavItem>
              <NavItem className='blue white-text nav-menu'>address</NavItem>
            </Dropdown>
            <Col className='space'>a</Col>
            <Dropdown className='nav-menu' trigger={
                <Col className='blue white-text nav-menu'>Available Tax Services</Col>
              }>
              <NavItem className='blue white-text nav-menu'>###-###-####</NavItem>
              <NavItem className='blue white-text nav-menu'>email</NavItem>
              <NavItem className='blue white-text nav-menu'>address</NavItem>
            </Dropdown>
            <Col className='space'>a</Col>
            <Dropdown className='nav-menu' trigger={
                <Col className='blue white-text nav-menu'>Business / Individuals</Col>
              }>
              <NavItem className='blue white-text nav-menu'>###-###-####</NavItem>
              <NavItem className='blue white-text nav-menu'>email</NavItem>
              <NavItem className='blue white-text nav-menu'>address</NavItem>
            </Dropdown>
            <Col className='space'>a</Col>
            <Dropdown className='nav-menu' trigger={
                <Col className='blue white-text nav-menu'>Resources</Col>
              }>
              <NavItem className='blue white-text nav-menu'>###-###-####</NavItem>
              <NavItem className='blue white-text nav-menu'>email</NavItem>
              <NavItem className='blue white-text nav-menu'>address</NavItem>
            </Dropdown>
            <Col className='space'>a</Col>
            <Dropdown className='nav-menu' trigger={
                <Col className='blue white-text nav-menu'>Get In Touch With Us</Col>
              }>
              <NavItem className='blue white-text nav-menu'>###-###-####</NavItem>
              <NavItem className='blue white-text nav-menu'>email</NavItem>
              <NavItem className='blue white-text nav-menu'>address</NavItem>
            </Dropdown>
          </nav>
        </div>
      </Row>
    )
  }
}

export default Nav;

SideNav.jsx

注意：

关注 id='open-sidebar' 来解决什么问题

import React, { Component } from 'react';
import { SideNav, SideNavItem, Button } from 'react-materialize';

class SideNavv extends Component {
  render() {
    return (
      <SideNav
        trigger={<Button id='open-sidebar' icon='menu'></Button>}
        options={{ closeOnClick: true }}
        >
        <SideNavItem userView
          user={{
            background: 'public/concert.jpg',
            image: 'public/mic.jpg',
            name: 'John Doe',
            email: 'example@gmail.com'
          }}
        />
        <SideNavItem waves href='#!' icon='info_outline'>About Our Firm</SideNavItem>
        <SideNavItem waves href='#!' icon='description'>Available Tax Services</SideNavItem>
        <SideNavItem waves href='#!' icon='perm_identity'>Business / Individuals</SideNavItem>
        <SideNavItem waves href='#!' icon='language'>Resources</SideNavItem>
        <SideNavItem waves href='#!' icon='contacts'>Get In Touch With Us</SideNavItem>
      </SideNav>
    )
  }
}

export default SideNavv;

媒体查询

注意： @media .space 有效，但即使它在同一个查询中， .nav-menu 也没有

@media #nav-title1 和 #nav-title2 是一个完美的例子

@media #open-sidebar 和 .sidenav（实际上是同一件事）根本不起作用

#nav-title1 {
  display: none;
  transition: 300ms;
}
@media (max-width : 799px) {
  #nav-title2 {
    display: none;
    transition: 300ms;
  }

  #nav-title1 {
    display: initial;
    transition: 300ms;
  }
}

.nav-menu, .space {
  display: initial !important;
  transition: 300ms;
}
@media (max-width: 850px) {
  .space, .nav-menu {
    display: none !important;
    transition: 300ms;
  }
}

#open-sidebar, .sidenav {
  visibility: visible;
  transition: 300ms;
}
@media (min-width: 800) {
  #open-sidebar, .sidenav {
    visibility: hidden;
    transition: 300ms;
  }
}

Answer 1

通过查看 css 代码，似乎最后一个媒体查询在 800 的末尾没有 "px"。

Answer 2

参考 Lev 这个评论，

嘿，我已经编译了这段代码并查看了它，它可以正常工作。我认为您感到困惑的原因是因为 react-materialize 库正在创建额外的 div，它充当您的 css 未针对的触发器 div/btn。换句话说，您只针对 .nav-menu、.space 而不是反应输出的附加标记。如果你检查你的代码，你会看到这个 div 出现在 nav-menu 之前，并且它没有相同的类。可用的税务服务 - 昨天 lev