Question

背景

不幸的是，我不熟悉现代CSS（媒体查询），来自PHP世界。因此，我不确定如何从逻辑上解决我的CSS布局问题。

我正在尝试创建用户仪表板模板，并且已经按照一些教程进行操作。该模板的要求如下：

主要内容区域是自助响应
侧边栏可折叠为小图标菜单
如果屏幕小于800px，侧边栏菜单会自动
当侧边栏折叠时（如果屏幕<800px），可以重新打开

到目前为止我拼凑的是什么：

＆＃13;

$(document).ready(function() {
        $('#sidebar-btn').click(function() {
            $('#sidebar-wrapper').toggleClass('visible');
            $('#wrapper').toggleClass('visible');
        });
    });

＆＃13;

/* navbar */
.navbar {
    margin-left:50px;
}

/* main content */
#page-content-wrapper {
    width:100%;
    position:absolute;
    padding:15px;
    padding-top:50px;
}

/* sidebar minimized */
#sidebar-wrapper {
    background:#444444;
    display:block;
    position:fixed;
    height:100%;
    z-index:1;
}
#sidebar-wrapper ul {
    margin:0px;
    padding:0px;
}
#sidebar-wrapper ul li {
    list-style:none;
}
#sidebar-wrapper ul li i {
    font-size:24px;
}
#sidebar-wrapper ul li span:nth-child(2) {
    display:none;
}
#sidebar-wrapper ul li a {
    display:block;
    padding:12px 12px;
    width:50px;
    color:#eeeeee;
    background:#222222;
    border-bottom:1px solid #444444;
}
#sidebar-wrapper ul li a:hover {
    color: #aaaaaa;
    background-color: #444444;
    text-decoration:none;
}
#sidebar-header {
    height:50px;
    background:#444444;
}
#sidebar-header h3 {
    display:none;
}
#sidebar-btn {
    display:inline-block;
    vertical-align:middle;
    cursor:pointer;
    position:absolute;
    top:0px;
    right:0px;
}
#sidebar-btn i {
    font-size:18px;
    color:#ffffff;
    padding:16px;
}
/* set element styles to fit tablet and higher(desktop) */
@media screen and (min-width: 800px) {
    /* sidebar visible */
    #sidebar-wrapper.visible {
        left:0px;
    }
    #sidebar-wrapper.visible ul li span:nth-child(2) {
        display:inline-block;
    }
    #sidebar-wrapper.visible ul li i {
        color: #777777;
        font-size:14px;
        min-width: 20px;
        text-align: center;
    }
    #sidebar-wrapper.visible ul li a {
        background:#222222;
        color:#cccccc;
        border-bottom:1px solid #444444;
        display:block;
        width:200px;
        padding:15px;
        font-size:14px;
    }
    #sidebar-wrapper.visible ul li a:hover {
        background:#777777;
        color:#eeeeee;
    }
    #sidebar-wrapper.visible h3 {
        display:inline-block;
        margin:0px;
        color:#fff
    }
    #wrapper.visible #page-content-wrapper {
        padding-left:200px;
    }
    #wrapper.visible .navbar {
        margin-left:200px;
    }
}

＆＃13;

<!-- Latest compiled and minified CSS -->

<script src="https://use.fontawesome.com/3c2244d372.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="visible">
    <!-- sidebar -->
    <div id="sidebar-wrapper" class="visible">
        <div id="sidebar-header">
            <h3></h3>
        </div>
        <ul class="sidebar-nav">
            <li><a href="#"><span><i class="fa fa-tachometer"></i></span><span>Dashboard</span></a></li>
            <li><a href="#"><span><i class="fa fa-calendar"></i></span><span>Schedule</span></a></li>
            <li><a href="#"><span><i class="fa fa-credit-card"></i></span><span>Orders</span></a></li>
            <li><a href="#"><span><i class="fa fa-cogs"></i></span><span>Settings</span></a></li>
            <li><a href="#"><span><i class="fa fa-life-ring"></i></span><span>Help</span></a></li>
        </ul>
        <div id="sidebar-btn">
            <i class="fa fa-bars" aria-hidden="true"></i>
        </div>
    </div>
    <!-- end sidebar -->

    <!-- main content -->
    <div id="page-content-wrapper">

        <nav class="navbar navbar-fixed-top navbar-inverse">
            <div class="container">
                <div id="navbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Signed in as</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container-fluid">

            <div class="row">
        <div class="col-md-12">
            <h1>Test Page</h1>
            <br>
            <p>
                "Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </p>
        </div>
    </div>

        </div>
    </div>
</div>

＆＃13;

问题

我遇到第四点的问题。到目前为止，如果我调整屏幕大小，侧边栏会弹出一个图标菜单，但是当屏幕处于小模式时，我无法再展开该菜单。如何覆盖CSS特异性，以便在切换可见类时，即使屏幕较小，我也可以再次查看菜单。

Answer 1

在我看来，你没有在屏幕上显示＃sidebar-wrapper的正确代码，最大宽度为800px。你声明了@media规则：

@media screen and (min-width: 800px)

并嵌套了显示侧边栏的所有代码，因此在这种情况下，只有当屏幕超过800px时，Jquery才会展开侧边栏。

尝试为

做同样的事情

@media (max-width: 800px)

但是，据我所知，在这种情况下媒体查询没有必要，因为你想在所有尺寸的屏幕上使用相同的可扩展侧边栏。

<强> UPD
将现有的JS代码更改为此代码：

$(document).ready(function() {
 if (window.matchMedia('(max-width: 800px)').matches) {

   $('#sidebar-wrapper').removeClass('visible')
   $('#wrapper').removeClass('visible');

   $('#sidebar-btn').click(function() {

     $('#sidebar-wrapper').toggleClass('visible');
     $('#wrapper').toggleClass('visible');
   });  
 } else {
     $('#sidebar-btn').click(function() {

       $('#sidebar-wrapper').toggleClass('visible');
       $('#wrapper').toggleClass('visible');
     });  
   }
});

此外，您还需要删除此行：

@media screen and (min-width: 800px) {

并且不要忘记在最后删除结束的花括号。

Bootstrap响应边栏调整为小屏幕中的图标菜单＆lt; 800px

1 个答案: