媒体查询和 JS 响应式导航栏没有功能

Question

我的 index.html 页面有 2 个问题，我将感谢所有帮助我摆脱它的人。 所以，首先我的响应式导航不起作用，即使正确编写了 js 链接。
而且，我的媒体查询没有任何效果，我想为 ipad 和移动用户隐藏一旁。 谢谢你

let toggle = document.querySelector('.toggle');
let body = document.querySelector('body');

toggle.addEventListener('click', function() {
    body.classList.toggle('body');
});

body {
    background-color: #C6EFE9;
}

.banner {
  width: 100%;
  background-image: url(../img/banner.jpg);
  background-repeat: no-repeat;
  margin-top: 75px;
  height: 350px;
  background-position: center;
  background-attachment: scroll;
}

aside{
    max-width: 50%;
    float: right;
  height: auto;
  margin-right: 50%;
  text-align: center;
  margin: 50px;
  padding: 50px;
  font: serif;
}

aside li {
  list-style: none;
  text-align: left;
}


.apercus {
    position: relative;
    background-color: rgba(255, 255, 255, 0.5);
    max-width: 50%;
  height: 250px;
  margin: 50px;
  border: 2px solid rgba(81, 136, 151, 1);
  cursor: pointer;
  transform: translate3d(10%);
  box-shadow: 10px 5px 5px rgba(37, 132, 139, 0.5);
  border-radius: 10px;
}

img {
  max-width: 50%;
  height: 250px;
  float: left;
  padding-right: 20px;
  border-radius: 10px;
}


.texte {
    padding: 20px;
    font-family: 'Sacramento', cursive;
}

.lien {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 10;
}
.lien a {
    display: block;

}

@media all and (max-width: 600){
  aside {
    display: none;
  }

  .apercus {
    position: relative;
    background-color: rgba(255, 255, 255, 0.5);
    max-width: 100px;
    height: 200px;
    margin: 50px;
    border: 2px solid rgba(81, 136, 151, 1);
    cursor: pointer;
    transform: translate3d(10%);
    box-shadow: 10px 5px 5px rgba(37, 132, 139, 0.5);
    border-radius: 10px;
}
}

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Page d'accueil</title>   
    <!------------------------------COMPATIBILITIES------------------------------>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!---------------------------------FONTS-------------------------------------->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Sacramento&display=swap" rel="stylesheet">

    <!---------------------------------------ICONS------------------------------->
    <script src="https://kit.fontawesome.com/2942c11df3.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" type="text/css" href="css/header.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    
</head>

<body>
    <header>
        <nav>
            <a href="#" id="logo"><i class="fas fa-pen-alt"></i> Lilaby</a>
            <div class="toggle">
                <i class="fas fa-bars ouvert"></i>
                <i class="fas fa-times ferme"></i>
            </div>
            <ul class="menu">
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Quizs</a></li>
                <li><a href="#">Outils</a></li>
                <li><a href="#">Contacts</a></li>
                <li><button class="btn">Connexion</button></li>
            </ul>
        </nav>
    </header>
    <div class="banner"></div>

    <aside>
      <h2>FAQ</h2>
      <ul>
            <li><a href="#">Lilaby c'est quoi ? </a></li>
            <br>
            <li><a href="#">Comment prendre RDV ?</a></li>
            <br>
            <li><a href="#">Pourquoi nous ? </a></li>
            <br>
            <li><a href="#">Actulités</a></li>
            <br>
            <li><a href="#">Prochains événements</a></li>
      </ul>
    </aside>
        
    <div class="apercus">
        <div class="lien">
            <a href="#"></a>
        </div>
        <div class="image">
            <img src="img/article.jpg" alt="Image de l'article 1">
        </div>
        <div class="texte">
            <h2>Un titre</h2>
            <p>Un paragraphe</p>
        </div>
    </div>

    <div class="apercus">
        <div class="lien">
        <a href="Mon_site/pageFormulaire.html"></a>
        </div>
        <div class="image">
            <img src="img/quiz.jpg" alt="Image de l'article 1">
        </div>
        <div class="texte">
            <h2>Un titre</h2>
            <p>Un paragraphe</p>
        </div>
    </div>

    <div class="apercus">
        <div class="lien">
            <a href="#"></a>
        </div>
        <div class="image">
            <img src="img/outils.jpg" alt="Image de l'article 1">
        </div>
        <div class="texte">
            <h2>Un titre</h2>
            <p>Un paragraphe</p>
        </div>
    </div>
    
</body>
    <script type="text/javascript" href="js/header.js"></script> 
</html>

Answer 1

你忘记了@media all and (max-width: 600) , @media all and (max-width: 600 px` ) 上的px
<script>标签位置错误。

正确地点：
<script src="js/header.js"></script>
</body>
</html>

Answer 2

在媒体查询上添加 px。 您在 js 中切换“body”class，但在 css 中没有“.body”class，您正在使用 body 标签。

媒体查询和 JS 响应式导航栏没有功能

问题描述

2 个解决方案

解决方案1
0 2021-12-27 23:05:45

解决方案2
0 2021-12-27 23:11:00

媒体查询和 JS 响应式导航栏没有功能

问题描述

2 个解决方案

解决方案1 0 2021-12-27 23:05:45

解决方案2 0 2021-12-27 23:11:00

解决方案1
0 2021-12-27 23:05:45

解决方案2
0 2021-12-27 23:11:00