导航栏没有响应答案

【问题标题】：navigation bar isn't responsive导航栏没有响应
【发布时间】：2022-08-19 04:18:50
【问题描述】：

这是我的 HTML 和 CSS 代码我想让导航栏响应但媒体查询不合作它没有任何区别。并且 #menu 首先没有任何区别（display: none 不起作用）它在媒体查询下也不起作用。我不知道为什么，请帮助我。

.header .icons a {
cursor: pointer;
font-size: 2.5rem;
color: #333;
margin-left: 1.5rem;
}

header .icons a:hover {
color: var(--pink);
}

#menu {
display: none;
}

.header .search-form {
position: absolute;
top: 115%;
right: 7%;
background: white;
border-top: #333;
width: 50rem;
height: 5rem;
display: flex;
align-items: center;
transform: scale(0);
transform-origin: top;
}

.header .search-form input {
height: 100%;
width: 100%;
font-size: 1.6rem;
color: pink;
padding: 1rem;
text-transform: none;
}

.header .search-form.label {
cursor: pointer;
font-size: 2.2rem;
margin-right: 1.5rem;
color: #333;
}

.header .search-form label:hover {
color: var(--pink);
}

@media(max-width:991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
}

@media(max-width:768px) {
#menu {
display: inline-block;
}
.header .navbar {
position: absolute;
top: 100px;
right: 0;
background-color: #333;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.header .navbar a {
color: rgb(243, 215, 215);
display: block;
margin: 1.5rem;
padding: .5rem;
font-size: 2rem;
}
}

<head>
<meta charset=\"UTF-8\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
<meta name=\"viewport\" content=\"width=device-width, initial- 
scale=1.0\">
<title>jj </title>
<link rel=\"stylesheet\" 
href=\"https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/6.1.2/css/all.min.css\">
<link rel=\"stylesheet\" href=\"css/styles.css\">
</head>
<body>
<header class=\"header\" >
<a href=\"#\" class=\"logo\">
<img src=\"images/logo.jpg\" alt=\"\"></a>
<nav class=\"navbar\">
<a href=\"#home\">home</a>
<a href=\"#varieties\">varieties</a>
<a href=\"#about us\">about us</a>
<a href=\"#contact us\">contact us</a>
</nav>

<div class=\"icons\">
<a href=\"#\" class=\"fas fa-bars\" id=\"menu\"></a>
</div>
<div class=\"search-form\">
<input type=\"search\" id=\"search-box\" placeholder=\"search\">
<label for=\"search-box\" class=\"fas fa-search\"></label>
</div>

我在头部使用了 meta 并且我已经添加了头部但它仍然不起作用

标签： html css navigationbar menubar

【解决方案1】：

在代码的开头添加一个带有元标记的 head 元素，以便根据实际较低的屏幕尺寸正确呈现网站（没有这个，网站往往会以比设备实际更高的分辨率尺寸呈现）。

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

我也找不到您的标头类在您的 html 代码中使用的位置，因此我删除了媒体查询中的大部分 .header 部分以使样式生效。

    @media(max-width:991px){
        html{
            font-size: 55%;
        }
        .header{
            padding: 1.5rem 2rem;
        }
    }
    @media(max-width:768px){
        #menu { 
            display: inline-block;
        }
        .navbar{
            position: absolute;
            top:100px; right: 0;
            background-color:#333;
            width: 30rem;
            height: calc(100vh - 9.5rem);
        }
        .navbar a{
            color:rgb(243, 215, 215);
            display: block;
            margin:1.5rem;
            padding:.5rem;
            font-size:2rem;
        }
    }

【讨论】：