如何修复使用 CSS3 媒体查询时不正常的菜单？答案

【问题标题】：How to fix menus that are not behaving when using CSS3 Media Queries?如何修复使用 CSS3 媒体查询时不正常的菜单？
【发布时间】：2019-01-27 02:40:27
【问题描述】：

我正在学习如何使用 CSS3 媒体查询为台式机、平板电脑和移动设备创建响应式网站。我创建了一个虚构的站点来练习，但我在菜单图标和水平菜单方面遇到了问题。在桌面视图中，菜单应该是水平的并向右浮动，但它是垂直的。当我将屏幕缩小到移动尺寸时，会显示菜单图标和水平菜单。我希望菜单图标显示在移动视图上，但它不会下拉菜单。有人可以告诉我我做错了什么吗？谢谢你。

我已尝试反转媒体查询中的菜单代码和我的常规 CSS 代码，但菜单仍然无法正常工作。我还为菜单代码的显示，我没有放，但所做的只是让所有菜单完全消失。我看过很多教程，但没有一个对我有帮助。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset=UTF-8">
    <title>Abstract Alibi Agency</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="container">
        <header>
            <h1>Abstract Alibi Agency</h1>
            <nav>
                <a href="#" id="menu-icon"></a>

                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

        <section class="hero">
            <div class="container">
                <h2>We'll catch them in the act.</h2>
            </div>
        </section>

        <section class="main">
            <aside>
                <h3>Background Checks</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                    ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                    dolore eu fugiat nulla pariatur.
                </p>
            </aside>
        </section>

        <section>
            <aside>
                <h3>Investigate Infidilty</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                    ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                    dolore eu fugiat nulla pariatur.
                </p>
            </aside>
        </section>

        <section>
            <aside>
                <h3>Security</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                    ut aliquip ex ea commodo consequat.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                    dolore eu fugiat nulla pariatur.
                </p>
            </aside>
        </section>
        <footer>&copy; Abstract Alibi Agency 2018 - All Rights Reserved.</footer>
    </div>
</body>
</html>

CSS：

body {
    font-family: 'Times New Roman', sans-serif;
    font-size: 1em;
    color: #000;
    margin: 0;
    padding: 0;
    background-color: #999;
}

#container {
    width: 100%;
    margin: 0 auto;
    position: absolute;
}

header {
    padding: 5px;
    background: #000;
    width: 100%;
    height: 76px;
    position: fixed;
}

h1 {
    margin-left: 10px;
    color: #00F;
    font-size: 1.5rem;
    display: inline-block;
}

h3 {
    color: #00F;
    text-align: center;
}

nav {
    float: right;
    padding: 5px;
    font-family: 'Georgia', sans-serif;
}

#menu-icon {
    background: url(../img/menu-icon.png);
    display: hidden;
    width: 50px;
    height: 42px;
    float: right;
}

ul {
    list-style: none;
}

li {
    display: inline-block;
    float: left;
    padding: 10px;
}

a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

    a:hover {
        text-decoration: underline;
    }

.hero {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background: url(../img/couple.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    border-bottom: #000 2px solid;
    z-index: -1;
}

    .hero h2 {
        width: 100%;
        padding: 80px;
        color: #FFF;
        text-align: center;
    }

section .main aside {
    max-width: 425px;
    text-align: left;
}

aside {
    width: 100%;
    float: none;
}

p {
    margin: 35px;
}

footer {
    width: 100%;
    margin-top: 0;
    padding: 15px;
    background-color: #000;
    color: #999;
    text-align: center;
}

@media (min-width: 640px) { /* targets screens 640px and up */
    h3 {
        margin: 30px;
        color: #00F;
        text-align: left;
    }

    header {
        position: relative;
    }

    nav {
        float: right;
        padding: 5px;
        font-family: 'Georgia', sans-serif;
    }

    #menu-icon {
        display: none;
    }

    ul {
        list-style: none;
    }

    li {
        display: inline-block;
        float: left;
        padding: 10px;
    }

    a {
        color: #fff;
        text-decoration: none;
        font-weight: bold;
    }

        a:hover {
            text-decoration: underline;
        }

    nav ul, nav:active ul {
        display: hidden;
        position: absolute;
        padding: 15px;
        background: #000;
        right: 5px;
        top: 65px;
        width: 10%;
    }

    nav:hover ul {
        display: block;
    }

    nav li {
        text-align: center;
        width: 100%;
        padding: 15px 0;
        margin: 0;
    }

    section .main aside {
        text-align: left;
    }

    aside {
        width: 33.3%;
        float: left;
    }

    footer {
        margin-top: 0;
        padding: 15px;
        background-color: #000;
        color: #999;
        text-align: center;
        clear: both;
    }
}

我只希望移动版本显示菜单图标并在单击时将其下拉，而平板电脑和桌面版本则显示水平菜单。

【问题讨论】：

你在ul和li上使用固定的width，`li`元素不能移动，删除ul和li元素width，之后应该是垂直的，并在 @media (max-width: 640px) 中添加已删除的 width ，在移动设备之后（在您的定义中）应该是水平的，如果不是移动的垂直
你以前看过navbar吗
Abdullah，我很困惑，因为我的 ul 或 li 标签上没有宽度。我唯一有宽度的是菜单图标，如果我删除它的宽度，它就会完全消失。我在这个标签上也有一个 nav ul, nav:active ul 但如果我从中删除宽度，它只会使我的菜单垂直变宽。

标签： css responsive-design media-queries

【解决方案1】：

设置 nav ul 宽度 25% 并删除 nav li 宽度并添加最后一行当前宽度 @media (max-width: 640px) { nav ul{ width:10%; } nav li{ width:100%} } 像这样

@media (min-width: 640px) {
    nav ul, nav:active ul {
        display: hidden;
        position: absolute;
        padding: 15px;
        background: #000;
        right: 5px;
        top: 65px;
        width: 25%;/* set to little more because Items can fit in horizontal */
    }

    nav li {
        text-align: center;
        /*width: 100%; remove li width than its should set auto 100% means 100% of parent(ul) and this makes a row(in block view)*/
        padding: 15px 15px;/*some padding for visibility*/
        margin: 0;
    }
}
@media (min-width: 640px) { 
        nav ul, nav:active ul {
        display: hidden;
        position: absolute;
        padding: 15px;
        background: #000;
        right: 5px;
        top: 65px;
        width: 10%;/*back to the you first width*/
    }

    nav li {
        text-align: center;
        width: 100%;/*open width for row to row view*/
        padding: 15px 0px;/*remove padding to normal*/
        margin: 0;
    }
}

移动版本显示菜单图标并在何时下拉点击了

一些jquery的宽度

$('.menu-icon').click(function () {
    $("nav").toggleClass("nav-hidden-mobile");
});

在你的 html 中 <nav> 到 <nav class="nav-hidden-mobile">

和类 css @media (max-width: 640px) { .nav-hidden-mobile{ display:none; } }

应该可以，没试过，但上层css试过了（在写第一条评论之前），它的工作原理

【讨论】：

阿卜杜拉，有没有办法在没有 JavaScript 的情况下做到这一点？我不擅长，这让我越来越困惑。