響應式開發從原理到實戰案例（三）：靜態頁面轉響應式頁面

上一節將靜態頁製作出來了，靜態頁要轉響應式的頁面如何實現了？如果在沒有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邏輯代碼，這是也是有損性能的(一般我們不會頻繁改變窗體的大小)

~~~~~~~~~~~~~~~~~如何改進了？請看下一節《使用媒體查詢實現響應式開發》~~~~~~~~~~~~~~~~~