我正試圖讓我的頁面移動響應。但是，我不確定為什么devtools & quot屏幕& quot看起來比我的元素上列出的px大。例如，我的html是390x844，但是看起來比顯示的屏幕小得多(還有& quot390x844)。我是否誤解了devtools顯示屏幕的方式？還是我的css只是亂了。

Navbar.jsx

import React from "react";
import { Link } from "react-router-dom";
import "../styles/navbar.css";
export default function Navbar() {
  const iconImg = "https://pngimg.com/uploads/pokemon/pokemon_PNG146.png";
  function resetBackground() {
    document.documentElement.style.setProperty("--color-background", "#c0ebe6");
  }
  return (
    <div className="navbar">
      <div className="left">
        <Link className="pikachu" to="/" onClick={resetBackground}>
          <img src={iconImg} className="pikachu-logo" />
        </Link>
        <p className="logo-text">
          <Link className="pokemon-paradise" to="/" onClick={resetBackground}>
            Pokemon Paradise
          </Link>
        </p>
      </div>
      <div className="right">
        <Link to="/" onClick={resetBackground}>
          Home
        </Link>
        <Link to="/pokemon" onClick={resetBackground}>
          Pokemon
        </Link>
        <Link to="/berries" onClick={resetBackground}>
          Berries
        </Link>
        <Link to="/moves" onClick={resetBackground}>
          Moves
        </Link>
      </div>
    </div>
  );
}

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300&display=swap");
body {
  background-color: #c0ebe6;
}
a:hover {
  cursor: pointer;
  color: grey;
}
.navbar {
  height: 110px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: aliceblue;
  padding: 5px;
  box-shadow: 0px 2px 3px 0.2px grey;
}
.pokemon-paradise:hover {
  color: black;
}
.pikachu-logo {
  height: 100px;
}
.logo-text {
  font-family: "Manrope", sans-serif;
  font-weight: 575;
  margin-left: 8px;
  font-size: 24px;
  cursor: pointer;
}
.left {
  display: flex;
  justify-content: center;
  align-items: center;
}

.right {
  display: flex;
  gap: 15px;
  margin-right: 15px;
  font-family: "Manrope", sans-serif;
  font-weight: 550;
  font-size: 20px;
}
.pikachu {
  margin: 10px;
}

@media (max-width: 820px) {
  .navbar {
    height: 110px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: aliceblue;
    padding: 5px;
    box-shadow: 0px 2px 3px 0.2px grey;
  }
  h1 .hero-text {
    text-align: center;
  }
}

Homepage.jsx

import React from "react";
import Navbar from "./Navbar";
import { Link } from "react-router-dom";
import "../styles/homepage.css";
import CollapsableContent from "./CollapsableContent";
export default function Homepage() {
  return (
    <div className="homepage-container">
      <div className="hero-header">
        <h1 className="hero-text">
          Looking for information on your favorite Pokemon?
        </h1>
        <h2 className="hero-text2">You've come to the right place.</h2>
      </div>
      <div className="button-container">
        <Link to="/pokemon" className="get-started-button">
          Get Started
        </Link>
      </div>
    </div>
  );
}

主頁. css

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300&display=swap");
.homepage-container {
  background: url("https://freepngimg.com/download/pokemon/37446-1-pokemon-ash-transparent-background.png")
    no-repeat center center;
  background-position-y: 70%;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #c0ebe6;
}
a {
  all: unset;
}
body {
  height: 100vh;
}
.hero-header {
  font-family: "Manrope", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
.hero-text {
  font-size: 38px;
}
.hero-text2 {
  font-size: 24px;
  margin-top: 30px;
}

.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
.get-started-button {
  font-family: "Manrope", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  border-radius: 500px;
  transition-property: background-color, border-color, color, box-shadow, filter;
  transition-duration: 0.3s;
  border: 1px solid transparent;
  letter-spacing: 2px;
  min-width: 160px;
  text-transform: uppercase;
  white-space: normal;
  font-weight: 700;
  text-align: center;
  padding: 17px 48px;
  color: #fff;
  background-color: #1ed760;
  height: 48px;
  margin-top: 24%;
}
.get-started-button:hover {
  background-color: #21e065;
}
@media (max-width: 820px) {
  .homepage-container {
    width: 390px;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

正如上面的評論所提到的，我的導航欄有一個錯誤。回去應用適當的樣式。