写响应式页面

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

　　　　

}

 

 

做响应式页面的要求：

 

<style>
    .snav {
        display: none;
    }
    
    @media(max-width:768px) {
        body {
            position: relative;
            overflow-x: hidden;
            width: 100%;
        }
        .snav {
            display: block;
            background: rgba(0, 0, 0, 0.7);
            position: fixed;
            right: -200px;
            width: 200px;
            top: 0;
            bottom: 0;
            z-index: 9999;
            transition: all 0.6s;
            -moz-transition: all 0.6s;
            -ms-transition: all 0.6s;
            -o-transition: all 0.6s;
            -webkit-transition: all 0.6s;
        }
        .snav a {
            color: #fff;
        }
        .snav ul>li {
            line-height: 40px;
            padding-left: 15px;
        }
        .snav ul>li ul {
            display: none;
        }
        .snav ul>li ul>li {
            padding-left: 25px;
            border-bottom: #ddd solid 1px;
        }
        .navbar-collapse {
            display: none;
        }
    }
</style>

 

 

样式的条件判断：最大宽度768宽