媒体查询问题 buildind portfolio-website

Question

大家好，我是网络开发的新手，我正在尝试构建我的投资组合网站作为培训项目，我在桌面模式下构建它，当我开始使用媒体查询来提高响应能力时，我遇到了一些问题，简而言之，我在最大宽度 860px 处设置了移动断点，只有当我手动调整浏览器 window 的大小时才有效，如果我使用 chrome 的开发人员工具在手机模式，如果你想在手机上查看，我会把代码和 link 留在网站上

http://mandowebdev.ddns.net/portfolio/

@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Knewave&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;800&display=swap");

:root {
  --background: #3e3e3e;
  --primary: #ffed00;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

html {
  width: 100vw;
  height: 100vh;
  font-size: 16px;
  background-color: var(--background);
  color: var(--primary);
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90%;
  margin: auto;
}

nav {
  width: 75%;
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: center;
  justify-content: center;
}

img {
  max-width: 100%;
  height: auto;
}

.nav-logo {
  font-family: "Luckiest Guy", cursive;
  font-size: 3rem;
  margin-right: 4.25rem;
  margin-top: 1rem;
}

.nav-ul {
  display: flex;
  list-style-type: none;
}

.nav-li {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  margin-right: 3.125rem;
}

.nav-links {
  text-decoration: none;
  color: var(--primary);
}

hr {
  border: 2px solid #707070;
}

.landing {
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(img/grid.svg);
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8rem;
  margin-bottom: 14.7rem;
  padding: 3rem;
}

.landing-logo {
  font-family: "Luckiest Guy", cursive;
  font-size: 7.25rem;
}

.landing-logo-subtitle {
  font-family: "Knewave", cursive;
  font-size: 4.19rem;
}

.stack {
  margin: auto;
  margin-top: 8rem;
  display: flex;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 12.25rem;
}

.stack-h1 {
  font-family: "Luckiest Guy", cursive;
  font-size: 2.5rem;
  margin-bottom: 8rem;
  margin-left: 7.5rem;
}

.stack article {
  align-items: center;
}

.cloud {
  border: 5px solid var(--primary);
  border-radius: 4rem;
  display: flex;
  justify-content: space-around;
  margin-left: 4rem;
}

.stack-icons {
  margin: 5rem 1.5rem 5rem 1.5rem;
  min-width: 2rem;
}

.projects {
  margin-top: 25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.projects-h1 {
  font-family: "Luckiest Guy", cursive;
  font-size: 3rem;
}

.project {
  padding-bottom: 10rem;
  padding-top: 10rem;
  display: grid;
  grid-column-gap: 8rem;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border-bottom: 2px solid var(--primary);
  font-family: "Poppins", sans-serif;
  line-height: 2rem;
}

#plant {
  direction: rtl;
}

#plant p {
  direction: ltr;
}

@media  (max-width: 860px){
  .project{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
}

@media screen and (max-width: 1230px) {
  .stack {
    flex-direction: column;
  }

  .cloud {
    margin-bottom: 15rem;
  }
}


@media screen and (max-width: 1600px) {
  html {
    font-size: 14px;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <title>Portfolio</title>
  </head>
  <body>
    <nav class="navbar">
      <p class="nav-logo">Mando.</p>
      <ul class="nav-ul">
        <li class="nav-li"><a href="#" class="nav-links">HOME</a></li>
        <li class="nav-li"><a href="#" class="nav-links">DEV-STACK</a></li>
        <li class="nav-li"><a href="#" class="nav-links">MY PROJECTS</a></li>
        <li class="nav-li"><a href="#" class="nav-links">CONTACT</a></li>
      </ul>
    </nav>
    <hr id="nav_hr" />

    <section class="landing">
      <div class="landing-text">
        <p class="landing-logo">Mando.</p>
        <p class="landing-logo-subtitle">Full Stack Web Dev</p>
      </div>
      <img class="memoji" src="img/memoji_img.svg" alt="#" />
    </section>

    <section class="stack">
      <article class="front-end">
        <h1 class="stack-h1">My Front-end Stack</h1>
        <div class="cloud">
          <img class="stack-icons" src="img/front-end/js.svg" alt="#" />
          <img class="stack-icons" src="img/front-end/html.svg" alt="#" />
          <img class="stack-icons" src="img/front-end/css-3.svg" alt="#" />
        </div>
      </article>

      <article>
        <h1 class="stack-h1">My Back-end Stack</h1>
        <div class="cloud">
          <img class="stack-icons" src="img/back-end/js.svg" alt="#" />
          <img class="stack-icons" src="img/back-end/django.svg" alt="#" />
          <img class="stack-icons" src="img/back-end/python.svg" alt="#" />
        </div>
      </article>
    </section>

    <section class="projects">
      <h1 class="projects-h1">My Learning Projects</h1>
      <article class="project">
        <img class="project-img" src="img/projects/python_guide.svg" alt="" />
        <p class="projects-p">
          A brief introduction to my favorite. Programming language: Python
        </p>
      </article>

      <article class="project" id="plant">
        <img class="project-img" src="img/projects/not_a_plant.svg" alt="" />
        <p class="projects-p">
          A product page design that includes images and a sample video <br />
          for the product with a contact form at the end
        </p>
      </article>

      <article class="project">
        <img class="project-img" src="img/projects/apple.svg" alt="" />
        <p class="projects-p">
          My first html and css project: a little roadmap of Steve Jobs life
          from 1974 to 2011
        </p>
      </article>
    </section>

    <section class="projects">
      <h1 class="projects-h1">Javascript Projects</h1>
      <article class="project">
        <img class="project-img" src="img/projects/generative_art.svg" alt="" />
        <p class="projects-p">
          My generative art project made in javascript, with this you can tweak
          <br />
          some parameters to create your own generative frame
        </p>
      </article>
    </section>
  </body>
</html>

Answer 1

在 max-width: 860px 媒体查询中添加 screen and。

Answer 2

当您减小视口大小时它可以工作，但在浏览器的模拟器上却没有，我怀疑您缺少元标记：

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

有关解释，请参阅 MDN。

媒体查询问题 buildind portfolio-website

media-queries problem buildind portfolio-website

html

css

web

media-queries

web-development-server