移动导航的问题

Question

我正在尝试隐藏移动设备上的桌面导航，但出于某种原因它不会隐藏，直到我将最大宽度增加到 1000px+，这不应该发生，因为我测试过的所有手机on 只有 400-500 像素宽。我只能假设这是我的代码中的其他原因导致的，但不确定要更改什么来修复它。

body {
    margin: 0;
}

ul {
    list-style: none;
}

.rnav {
    background-color: rgb(40, 40, 44);
    height: 60px;
}

.darkbg {
    background-color: rgb(55, 55, 59);
}

a {
    text-decoration: none;
}

.navbtn:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #FFF;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}
.navbtn:hover:before {
    visibility: visible;
    transform: scaleX(1);
}

.logo {
    width: 250px;
    max-width: 300px;
    margin-left: 20px;
    transition: all ease .3s;
}

.locn {
    height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    float: left;
}

.logo:hover {
    transform: scale(1.05);
}

.logreg {
    margin-right: 10px;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.logbtn {
    background-color: rgb(8, 98, 182);
    color: #fff;
    padding: 10px 22px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 0 0 rgb(3, 66, 124);
    transition: all .3s;
    cursor: pointer;
}

.regbtn {
    background-color: rgb(14, 138, 209);
    color: #fff;
    padding: 10px 24px;
    margin-left: 10px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 0 0 rgb(6, 96, 148);
    transition: all .3s;
    cursor: pointer;
}

.logbtn:focus,.regbtn:focus {
    outline: none;
}

.logbtn:active,.regbtn:active {
    box-shadow: none;
    transform: translateY(3px);
}

.navlist {
    float: left;
}

.mnav {
    display: block;
    position: absolute;
    right: 25px;
    top: 10px;
    z-index: 100;
}

@media screen and (min-width: 800px) {
    .mnav {
        display: none;
    }
}

@media screen and (max-width: 800px) {
    .rnav #myLinks {
        display: none;
      }
    .logreg {
        display: none;
    }
}

<html>
    <head>
        

<link href="css/style.css" rel="stylesheet">
<link href="css/icon.css" rel="stylesheet">
<link href="https://kit-pro.fontawesome.com/releases/latest/css/pro.min.css" media="all" rel="stylesheet">

    </head>

<body class="darkbg">

<nav class="rnav">
      
<a href="#" class="locn">
    <img src="https://cdn.discordapp.com/attachments/833803478618996756/834522746548387888/Rocrates_logo.png" class="logo">
</a>

<ul class="navlist" id="myLinks">
    <li class="navbtn2">
        <a>Crates</a>
    </li>
    <li class="navbtn">
        <a>Coinflip</a>
    </li>
</ul>

<div class="logreg">
<button class="logbtn"><i class="fas fa-user-friends"></i> Login</button>

<a href="/register">
    <button class="regbtn"><i class="fas fa-user-plus"></i> Register</button>
</a>
</div>

<div id="nav-icon3" class="mnav">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>

    </nav>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Answer 1

将这行代码添加到文档的头部：

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

您的浏览器实际上是在为您的页面创建一个较小的 'zoomed out' 图像，而不是实际调整它的大小。参见 here。

移动导航的问题

Issues with mobile nav

html

css

nav

responsive