我的 CSS 的哪一部分阻止了媒体查询的工作？反应应用程序

Question

我想让我的导航栏在屏幕达到 480 像素以下时从一行变为一列。经过反复试验，我不确定是位置：固定还是位置：粘性。有什么办法可以解决这个问题吗？

import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import "./Nav.css";

function Nav() {
  // creating a piece of state for showing the logo when we scroll
  const [show, handleShow] = useState(false);
  const history = useHistory();

  const transitionNavBar = () => {
    // if you have scrolled vertically more than 100 on your screen, show the black background of the navbar
    if (window.scrollY > 100) {
      handleShow(true);
      // if not, don't show the black background of the navbar
    } else {
      handleShow(false);
    }
  };

  // a listener for when we scroll on the screen
  useEffect(() => {
    // every time we scroll, listen for it and trigger the function transitionNavBar that we just made
    window.addEventListener("scroll", transitionNavBar);
    // when the component mounts, clean up the function so it isn't permanently attached to the listener
    return () => window.removeEventListener("scroll", transitionNavBar);

    // the empty brackets mean it will only run when it mounts / re-renders
  }, []);
  return (
    <div className={`nav ${show && "nav__black"}`}>
      <div className="nav__contents">
        <img
          onClick={() => history.push("/")}
          className="nav__logo"
          src="https://i.imgur.com/da52IhK.png"
          alt=""
        />
        <img
          onClick={() => history.push("/profile")}
          className="nav__avatar"
          src="https://pbs.twimg.com/profile_images/1240119990411550720/hBEe3tdn_400x400.png"
          alt=""
        />
      </div>
    </div>
  );
}

export default Nav;

.nav {
  background-color: #131921;
  position: sticky;
  top: 0;
  z-index: 100;

  /* Animations */
  transition-timing-function: ease-in;
  transition: all 0.5s;
}

.nav__black {
  background-color: #111;
}

.nav__contents {
  display: flex;
}

.nav__logo {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 12rem;
  height: 12rem;

  padding-right: 1rem;
  padding-left: 1rem;

  object-fit: contain;
  cursor: pointer;
}

.nav__avatar {
  position: fixed;
  top: 1.5rem;
  right: 1rem;
  width: 8rem;
  height: 8rem;
  padding-left: 1rem;
  cursor: pointer;
  border-radius: 4rem;
}

@media only screen and (min-device-width: 480px) {
  .nav {
    flex-direction: row;
  }
}

@media only screen and (max-device-width: 480px) {
  .nav {
    flex-direction: column;
  }
}

父div有问题吗？或者我可以通过更改子 div 来解决这个问题吗？

Answer 1

首先你应该在 meta 中编写代码

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

并删除

@media only screen and (max-device-width: 480px) {
.nav {
  background-color: #131921;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-direction: row;
  /* Animations */
  transition-timing-function: ease-in;
  transition: all 0.5s;
}

.nav__black {
  background-color: #111;
}

.nav__contents {
  display: flex;
}

.nav__logo {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 12rem;
  height: 12rem;

  padding-right: 1rem;
  padding-left: 1rem;

  object-fit: contain;
  cursor: pointer;
}

.nav__avatar {
  position: fixed;
  top: 1.5rem;
  right: 1rem;
  width: 8rem;
  height: 8rem;
  padding-left: 1rem;
  cursor: pointer;
  border-radius: 4rem;
}

@media only screen and (min-device-width: 480px) {
  .nav {
    flex-direction: column;
  }
}

我的 CSS 的哪一部分阻止了媒体查询的工作？反应应用程序

What part of my CSS is stopping the media queries from working? React-app

css

media-queries

reactjs