Question

我只为移动视图制作了导航，并注意到它仍然保留在桌面视图中，尽管它只与移动媒体查询css一起使用。导航是菜单div的div，它们都位于html中网站的主导航中。如何确保导航及其内容仅保留在移动视图中而不包括桌面视图？

jsfiddle - http://jsfiddle.net/LpbL6vj2/

<aside class="sidebar">
    <nav>
        <div class="menu"></div>
        <div class="mobile-header"><a href="index.html">Taffies Cupcakes</a></div>
        <ul class="main_nav">
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about us</a></li>
            <li><a href="orders.html">orders</a></li>
            <li><a href="gallery.html">gallery</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul>
    </nav> <!-- end of nav -->

        <div class="company_info">
            <p>Taffies cupcakes</p>
            <p>111 x drive road</p>
            <p>milton keynes</p>
            <p>l0002</p><br>
            <p>telephone: 078 878-8888</p>
        </div> <!-- end of compnay info text -->

</aside> <!-- end of aside -->



@media screen and (max-width:640px){

    .container{
        width:100%;
    }

    .sidebar{
        width:100%;
        margin:0;

    }

    .main_nav{
        display:none;

    }

    .company_info{
        display:none;
    }

    .first_article{
        width:90%;
        margin-top:50px;
    }

    footer p{
        display:none;
    }

    .about_section{
        width:80%;
        margin-top:50px;
        margin-bottom:100px;
    }

    .orders_section{
        width:80%;
        margin-top:50px;
        margin-bottom:100px;
    }

    .contact_section{
        width:80%;
        margin-top:50px;
        margin-bottom:100px;
    }

    .gallery_section{
        width:80%;
        margin-top:50px;
        margin-bottom:100px;
    }

    .menu:before{
        content:"Menu";
    }

    .menu{
        font-family:myriad pro;
        font-size:20px;
        color:#3d2316;
        display:inline-block;
        padding-left:8px;
        padding-right:0px;
        padding-top:10px;
        padding-bottom:8px;
        background-color: #CBAFA2;
        cursor:pointer;
        width:30%;
        text-align:center;
        float:left;
    }

    header{
        display:none;
    }

    .mobile-header{
        width:62%;
        padding:10px;
        font-family:georgia;
        font-weight:bold;
        font-size:20px;
        background-color:#3d2316;
        float:left;
    }


}

Answer 1

您需要添加非媒体查询规则才能隐藏导航。类似的东西：

.sidebar nav {
    display: none;
}

@media (max-width: 640px) {
    .sidebar nav {
        display: block;
    }
}

因此，当窗口较窄时，媒体查询规则适用。当窗口很宽时，适用正常规则。

专门为移动视图创建了一个导航，但它仍然显示在桌面视图中

1 个答案: