html 媒体查询在移动的断点上不起作用

我正在一个学校项目的网站上工作，我有2个媒体查询断点，从桌面到平板电脑，最后到移动的。我的平板电脑断点在991px工作正常，但我的移动设备断点在479px没有注册任何更改。我真的不知道出了什么问题。
我尝试使用媒体查询为我的网站设置多个断点，希望它能立即工作。结果显示只有max-width值最高的媒体查询才能工作。
任何帮助都将不胜感激。
这是我一直在写我的媒体问题：

@media only screen and (max-width: 991px) {}
@media only screen and (max-width: 479px) {}

这是我为媒体查询编写的所有代码（如果需要

@media only screen and (max-width: 991px) {
  body {
    width: 96%;
  }
  h2 {
    font-family: 'salomeitalic';
    font-weight: normal;
    font-style: normal;
    font-size: clamp(50px, 5.208vw, 100px);
    padding: 0px;
    margin: 0px;
    line-height: 1.1;
    color: #242325;
  }
  .p2 {
    font-family: 'Satoshi-Variable';
    font-weight: medium;
    font-size: clamp(16px, 1.094vw, 21px);
    color: #242325;
    margin: 0;
  }
  .nav-front {
    position: sticky;
    right: auto;
    top: auto;
    bottom: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    border-left: none;
    padding: clamp(20px, 2.083vw, 40px);
  }
  .top-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .nav-links {
    display: flex;
    flex-direction: row;
    background-color: #242325;
    border-radius: 50px;
  }
  .nav-logo {
    height: 70px;
    width: auto;
    margin-bottom: 0;
  }
  .nav-top {
    display: none;
    margin-bottom: 40px;
  }
  a {
    font-family: 'Satoshi-Variable';
    font-weight: medium;
    font-size: clamp(18px, 1.302vw, 25px);
    color: #FFF8F2;
    margin-bottom: 0;
    text-decoration: none;
    background-color: #242325;
    padding: 20px;
    border-radius: 50px;
  }
  .contact-wrapper {
    display: none;
  }
  header {
    width: 100%;
    height: 80vh;
  }
  .profile-img-wrapper {
    width: 90%;
  }
  .about-wrapper {
    width: 95%;
  }
  .scroll-button-wrapper {
    display: flex;
    justify-content: end;
    width: 104%
  }
  main {
    width: 100%;
  }
  .project-1 {
    height: 455px;
  }
  .project-3 {
    height: 455px;
  }
  .project-5 {
    height: 455px;
  }
  .contact-div {
    height: 435px;
  }
  .arrow-up-left {
    margin-bottom: 17%;
  }
}

@media (max-width: 479px) {
  body {
    background-color: aqua;
  }
  h2 {
    font-family: 'salomeitalic';
    font-weight: normal;
    font-style: normal;
    font-size: clamp(50px, 13.021vw, 250px);
    padding: 0px;
    margin: 0px;
    line-height: 1.1;
    color: #242325;
  }
  header {
    display: flex;
    flex-direction: column;
    height: 100%
  }
  .header-left {
    width: 100%;
    height: 100vh;
  }
}

<html lang="da" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>HTML CODE</title>
    <link rel="stylesheet" href="projekt-3.css">
</head>
<body>
    
        <nav class="nav-front">
            <div class="top-wrapper">
                    <img class="nav-logo" 
src="exports/logo.svg" alt="Staugaard Design Logo">
                <div class="nav-links">
                    <div class="nav-top">
                        <p>navigation</p>
                        <img class="arrow-down" src="exports/arrow-down.svg">
                    </div>
                    <a href="projekt-3.html">om mig</a>
                    <a href="projekt-3.html">projekter</a>
                    <a href="projekt-3-kontakt.html">kontakt</a>
                </div>
            </div>
            <div class="contact-wrapper">
                <div class="margin-buttom">
                <a href="https://www.instagram.com/staugaard_design/">instagram</a>
                </div>
                <p>©2022</p>
                <a href="projekt-3-kontakt.html"><button>KONTAKT</button></a>
            </div>
        </nav>
   
    <header>
        <div class="header-left">
            <div class="margin">
                <h2>KREATIV DESIGNER & UDVIKLER</h2>
            </div>
            
            <div class="moving-text-wrapper">
                <img class='orange-star' src="exports/star-orange.svg">
                <p class="white">2022 PORTFOLIO</p>
                <img class='orange-star' src="exports/star-orange.svg">
                <p class="white">2022 PORTFOLIO</p>
                <img class='orange-star' src="exports/star-orange.svg">
            </div>

            <div class="profile-img-wrapper">
            </div>
        </div>

       
        <div class="header-right">
            <div class="about-wrapper">
                <img class="black-star" src="exports/star-2.svg">
                
                <p>hej! mit navn er kristoffer. jeg er en freelance web designer samt web udvikler som bor i odense. Jeg skaber smukke hjemmesider i samarbejde med virksomheder og selvstændige som gerne vil skille sig ud fra konkurrenterne.</p>
            </div>
            <div class="scroll-button-wrapper">
                <div class="scroll-button">
                    <img class="orange-arrow" src="exports/orange-arrow.svg">
                </div>
            </div>
        </div>
    </header>

   <div class="transition">
        <h1>UDVALGTE<br>PROJEKTER</h1>
   </div>

   <main>
    <div class="main">
        <div class="project-1">
            <div class="project-text1">
                <div class="margin-buttom">
                    <h2>classic curry</h2>
                </div>
                <p class="p2">restauranten classic curry er en klassisk indisk restaurant som laver autentiske retter. projekt gik ud på at vi skulle vælge en hjemmeside som vi synes manglede en kærlig hånd.</p>
            </div>
            <div class="project-visual">
                <div class="img-wrapper">
                    <img class="project-img" src="exports/classic-img.png" alt="classic curry hjemmeside">
                </div>
                <img class="arrow-up-left" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
            </div>
        </div>
        <div class="project-2">
            <div class="project-text2">
                <div class="margin-buttom">
                    <h2>gluds</h2>
                </div>
                <p class="p2">gluds café manglede en hjemmeside som kunne fremvise alt hvad caféen har at byde på, i et elegant design.</p>
            </div>
            <div class="project-visual">
                <img class="arrow-up-right" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
                <img class="project-img" src="exports/gluds-img.png" alt="gluds cafe hjemmeside">
            </div>
        </div>
        </div>
        <div class="main">
            <div class="contact-div">
            <img class="arrow-up-white" src="exports/arrow-up-white.svg">
            <div class="contact-text">
                <h3>kontakt<br>kontakt<br>kontakt</h3>
            </div>
        </div>
        <div class="project-3">
            <div class="project-text3">
                <div class="margin-buttom">
                    <h2>justesen artpack</h2>
                </div>
                <p class="p2">virksomheden justesen artpack er et kunst transport- og vedligeholdelses firma. De havde brug for en mere advanceret hjemmeside og et mere moderne design, som de selv kunne opdatere med blog indlæg.</p>
            </div>
            <div class="project-visual">
                <div class="img-wrapper">                
                    <img class="project-img" src="exports/justesen-img.png" alt="justesen artpacks hjemmeside">
                </div>
                <img class="arrow-up-left2" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
            </div>
        </div>
        </div>
        <div class="main">
            <div class="project-4">
                <div class="project-text4">
                    <div class="margin-buttom">
                        <h2>m/k aps</h2>
                    </div>
                    <p class="p2">m/k service aps er et rengørings firma som manglede et nyere og moderne design, med mere funktionalitet.</p>
                </div>
                <div class="project-visual">
                    <img class="arrow-up-right" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">
                    <img class="project-img" src="exports/mk-img.png" alt="mk serverice hjemmeside">
                </div>
            </div>
            <div class="project-5">
                <div class="project-text5">
                    <div class="margin-buttom">
                        <h2>by gitte lage</h2>
                    </div>
                    <p class="p2">wellness -by gitte lage er en virksomhed som tilbyder wellness behandlinger og massager. i et tæt samarbejde med ejeren hjalp jeg med at bygge virksomhedens online struktur fra bunden.</p>
                </div>
                <div class="project-visual">
                    <div class="img-wrapper">
                        <img class="project-img" src="exports/wellness-img.png" alt="mk serverice hjemmeside">
                    </div>
                    <img class="arrow-up-left" src="exports/arrow-up.svg" alt="knap til at se hjemmesiden">

                </div>
            </div>
        </div>
   </main>
</body>

html 媒体查询在移动的断点上不起作用

1条答案

相关问题

热门标签

最新问答