响应式开发从原理到实战案例（三）：静态页面转响应式页面

上一节将静态页制作出来了，静态页要转响应式的页面如何实现了？如果在没有H5的新特性下，我们实现的思路会是这样的：

为宽屏设计一套样式 index-large-screen.css

<span style="font-size:12px;">.header-wrapper .nav-list li{
    float: left;
}
.more-list button{
    display: none;
}</span>

为窄屏设计一套样式  index-small-screen.css

<span style="font-size:12px;"> /*列表 ul 标签*/
 .header-wrapper .nav-collapse{
     position: relative;
     top:40px;
     background-color: #3c3f41;
 }
 .header-wrapper .nav-list li:not(:first-child){
     margin-top: 1.2px;
 }
 .more-list button{
     display:block;
 }</span>

使用js控制显示逻辑

<span style="font-size:12px;">  <script src="jquery-1.8.3.js"></script>
    <script>
        var btnMore;
        $(function () {
            btnMore = $("#btnMore");
            $(btnMore).click(function () {//按钮点击事件
                $(".nav-collapse").toggle("slow", "linear");//菜单显示和隐藏之间切换
            });
            reSize_ChangeStyle();//调用大小调节的方法
        });
        //调节窗体的大小
        function reSize_ChangeStyle() {
            var lnk_Large = $("#lnk-large");//获取引用宽屏的样式
            var lnk_Small = $("#lnk-small");//获取引用窄屏的样式

            var innerWidth = $(this).innerWidth();//获取窗体的宽度
            if (innerWidth > 620) { //宽屏的情况
                if (lnk_Small.length > 0) {
                    lnk_Small.remove();//移除窄屏样式文件的引用
                }
                if (lnk_Large.length == 0) {//宽频文件不存在，则引入
                    $("head").append('<link id="lnk-large" href="index-large-screen.css" type="text/css" rel="stylesheet"/>');
                    $(btnMore).hide("slow");//隐藏更多按钮
                    $(".nav-collapse").show("slow"); //
                }
            } else {//窄屏处理
                if (lnk_Large.length > 0) { //移除宽屏样式文件
                    lnk_Large.remove();
                }
                if (lnk_Small.length == 0) {//引入窄屏样式文件
                    $("head").append('<link id="lnk-small" href="index-small-screen.css" type="text/css" rel="stylesheet"/>');
                    $(btnMore).show("slow");
                }
            }
        }
        //窗体大小改变事件
        $(this).resize(function () {
            reSize_ChangeStyle()
        });
    </script></span>

js代码中需要引入jquery文件

最终的效果

这种方法存在的不足：

1. 要编写多个样式文件
2. 要编写一定的逻辑代码来实现，对没有编码基础的存在一定的难度
3. 要使用js对dom的操作的，有损性能
4. 每次改变都要触发js逻辑代码，这是也是有损性能的(一般我们不会频繁改变窗体的大小)

~~~~~~~~~~~~~~~~~如何改进了？请看下一节《使用媒体查询实现响应式开发》~~~~~~~~~~~~~~~~~