响应式原理
响应式容器
适配小屏幕的导航栏
响应式导航交互

响应式原理

作为一名网页设计师或前端开发者，我们希望我们的网页总能很容易的自适应不同的设备和屏幕尺寸，不管我们用户使用的是21″台式显示器，13″笔记本电脑，10″的iPad或者更小的智能手机。响应式网页设计使用@media queries根据浏览器的宽度和CSS来改变页面的布局。我们可以这样使用的CSS：

                            
/* 适配1024px宽度以下的尺寸，一般为桌面端 */
@media all and (max-width: 1024px) {

}
/* 适配768px宽度以下的尺寸，一般为平板设备 */
@media all and (max-width: 768px) {

}
/* 适配480px宽度以下的尺寸，一般为大屏幕手机设备 */
@media all and (max-width: 480px) {

}
/* 适配320px宽度以下的尺寸，一般为小屏幕手机设备 */
@media all and (max-width: 320px) {

}

响应式容器

所谓擒贼先擒王，先从第二节提到的.container 下手

建议遵循 bootstrap的编码规范，详细见媒体查询的位置，下面的代码写在.container{}后面

                        
@media all and (max-width: 1024px) {
    body {min-width: auto; }
    .container {width: 100%; }
}

适配小屏幕的导航栏

当屏幕缩小到一定宽度的时候，原来的导航就会挤得很难看，但是导航说呈现给用户一定要美美哒，所以我们可以再写一个适配小屏幕的导航栏作为备胎。
下面代码写在<div class="nav"></div> 里面，与<div class="menu container"></div> 同级

                        
<div class="mobile-menu">
    <a href="javascript:" class="nav-left btn-menu">=</a>
    <a href="javascript:"><img src="http://codeasily.net/course/img/menu-apple-logo.svg" alt=""></a>
    <a href="javascript:" class="nav-right"><img src="http://codeasily.net/course/img/menu-bag.svg" alt=""></a>
</div>

简单的描绘一下备胎

默认屏幕下是不显示备胎的，@media识别到合适的尺寸的时候就让它上位并且让原来的导航退位

                        
.nav .mobile-menu {
    display: none;          /*默认情况下不显示*/
    text-align: center;
}

.nav .mobile-menu a {
    display: inline-block;
    width: 44px;
    height: 44px;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.nav .mobile-menu .btn-menu {
    font-size: 30px;
    color: #fff;
    line-height: 44px;
}

.nav .mobile-menu .nav-left {float: left; }
.nav .mobile-menu .nav-right {float: right;}

接下来就是备胎逆转的时候了，当窗口宽度小于768px时就是默认导航退位，备胎上位的时候了。

但是备胎只有三个按钮没鸟用，这时候小屏幕下的默认导航可以利用起来，改造成竖向列表的形式，这样子小屏幕导航可以点出这样的列表式导航，还是原配赢了.

注意@media 里面提到过的元素必须放在被改造前元素的后面，否则@media不起作用!
下面的代码应该写在.nav .mobile-menu .nav-right {float: right;} 的后面

                        
/*识别小屏幕设备的导航变化*/
@media screen and (max-width: 768px) {
    .nav .mobile-menu {display: block; }
    .nav .menu {
        display: none;
        position: absolute;
        top: 44px;
        padding: 0 20px;
        background: #000;
    }
    .nav .menu.show{
        display: block;
    }
    .nav .menu a {
        display: block;
        text-align: left;
        line-height: 44px;
        border-bottom: 1px solid #666;
    }

    .nav .menu a:first-child, .nav .menu a:last-child {display: none; }
}

响应式导航交互

利用javascript实现点击小屏幕导航左边的菜单图标即显示列表导航，再点一次则收起的效果
先在HTML里铺“路”，在小屏幕导航的左菜单按钮加入点击事件onclick="toggleMenu()"

                        
 <a href="javascript:" class="nav-left btn-menu" onclick="toggleMenu()">=</a>

<div class="menu container"> 加上id方便javascript控制显示隐藏

                        
<div class="menu container" id="menu">

在 javascript面板中声明 toggleMenu() ，通过点击事件控制列表导航显示隐藏

                        
function toggleMenu(){
    document.getElementById('menu').classList.toggle('show')
}

你已经完成了响应式导航的实现和交互效果，可以打开编辑器的全屏模式，再缩小浏览器窗口试试看！

本节到此结束

下一节：响应式内容及底部

如有疑问或建议请发送到此邮箱反馈lipten@foxmail.com

css响应式网页实战