我的某些媒体查询工作，另一些则不行，不知道为什么

Question

Like the title states, I have a number of media queries and only some of them work. They all follow the same principal, at a certain screen width hide one thing and replace it with another.

I am using React.js, Redux, React-Materialize and Express.js. Below I have included all 3 relevant files of code, Nav.jsx, SideNav.jsx and the relevant media queries.

Nav.jsx

Note:

Focus on className='sidenav' , className='nav-menu' for what doesn't work Focus on className='space', id='nav-title1' and id='nav-title2' for what does work

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

Note:

Focus on id='open-sidebar' for what doesn't work

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 Queries

Note: @media .space works but even though it is in the same query, .nav-menu does not

@media #nav-title1 and #nav-title2 is a perfect example that works

@media #open-sidebar and .sidenav (which are really the same thing) do not work at all

#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

Refer to this comment by Lev,

Hey, I have compiled this code and reviewed it and It works properly. I think the reason why you are confused is because react-materialize library is creating additional div, that acts as trigger div/btn that your css is not targeting. In other words you are only targeting .nav-menu, .space but not the additional markup that react outputs. If you inspect your code you will see this div that comes before nav-menu and it does not have the same classes. Available Tax Services – lev yesterday