摘要：年月初，中共中央國務(wù)院發(fā)布了關(guān)于構(gòu)建和諧勞動關(guān)系的意見，明確提出切實保障職工休息休假的權(quán)利，完善并落實國家關(guān)于職工工作時間全國年節(jié)及紀念日假期帶薪年休假等規(guī)定。下一步要抓好這項工作的落實。

一直以來響應(yīng)式布局都是利用的bootstrap來做，但是在手機上瀏覽的話，bootstrap樣式文件還是有點大 118k，如果再用上一些js庫的話，上個幾百k是輕輕松松了，這樣一來用移動流量的話真的吃不消啊。
所以痛定思痛，還是用原生的來寫吧，原生css樣式，js最多用的zepto, 當然這篇文章我還是用的原生js. 做的這個例子還是比較簡單的，畢竟是入門級別的嘛

其實pad端和pc端很難區(qū)分，pad的分辨率還是比較高的啊

點擊菜單前 和 點擊菜單后的效果

    
    
    
    


    

        
響應(yīng)式布局之側(cè)欄菜單
        
            
            
            
        
    

    

        

            
菜單1
            
菜單2
            
菜單3
            
菜單4
        
    

    

        

            
菜單1
            
菜單2
            
菜單3
            
菜單4
        
    

    

        

            據(jù)了解，2015年以來，我國已多次公開強調(diào)落實帶薪休假。2015年3月5日，國務(wù)院總理李克強在政府工作報告中指出，
            “要深化服務(wù)業(yè)改革開放，落實財稅、土地、價格等支持政策以及帶薪休假等制度?！?015年4月初，中共中央、國務(wù)院
            發(fā)布了《關(guān)于構(gòu)建和諧勞動關(guān)系的意見》，明確提出“切實保障職工休息休假的權(quán)利，完善并落實國家關(guān)于職工工作時間、
            全國年節(jié)及紀念日假期、帶薪年休假等規(guī)定”。同年4月24日，人力資源和社會保障部新聞發(fā)言人李忠在2015年一季度新聞
            發(fā)布會上表示，帶薪年休假制度施行7年多以來，仍有部分用人單位和有雇工的個體工商戶沒有認真執(zhí)行帶薪年休假的法律規(guī)定，
            職工休息休假權(quán)益有待進一步落實。下一步要抓好這項工作的落實。
        
    

    

上段html頁面中包含的主要關(guān)鍵點：

一個典型的針對移動端優(yōu)化的站點包含:

width屬性控制視口的寬度?？梢韵駑idth=600這樣設(shè)為確切的像素數(shù)，或者設(shè)為device-width這一特殊值來指代比例為100%時屏幕寬度的CSS像素數(shù)值。（相應(yīng)有height及device-height屬性，可能對包含基于視口高度調(diào)整大小及位置的元素的頁面有用。）
initial-scale屬性控制頁面最初加載時的縮放等級,一般初始化為1.

2.一個只在移動瀏覽器下顯示的按鈕

3.一個在pc大分辨率下面展示的導(dǎo)航

    

        

            
菜單1
            
菜單2
            
菜單3
            
菜單4
        
    

4.一個在移動分辨率下展示的導(dǎo)航

    

        

            
菜單1
            
菜單2
            
菜單3
            
菜單4
        
    

大家可能會問，為什么需要兩段導(dǎo)航代碼呢，不是可以寫一段pc和移動公用么，一開始我也是這樣寫的，但是發(fā)現(xiàn)pc端縮窄瀏覽器的時候，分辨率相當于移動端，然后用按鈕控制了導(dǎo)航隱藏之后，再擴張瀏覽器， 導(dǎo)航還是隱藏的。
只要不去拉縮網(wǎng)頁就沒問題，但是為了體驗的完美，犧牲下代碼共用性吧，寫了兩段導(dǎo)航html.

body {
    margin: 0;
}

p {
    margin: 0;
}

.title {
    display: inline-block;
}

.nav-large {
    width: 200px;
    float: left;
}

.nav-small {
    width: 100px;
    position: absolute;
    background-color: white;
    display: none;
}

@media screen and (min-width:768px) {
    .header {
        height: 60px;
        background-color: #FF7F50;
    }

    .nav-large {
        display: block;
    }

    .nav-small {
        display: none;
    }

    .collapsed {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .header {
        text-align: center;
        height: 40px;
        background-color: #FF7F50;
    }

    .nav-large {
        display: none;
    }

    .collapsed {
        width: 40px;
        height: 40px;
        float: left;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        cursor: pointer;
        outline:none;
    }

        .collapsed:active {
            border: 1px solid transparent;
        }

        .collapsed .icon-bar {
            display: block;
            width: 22px;
            height: 2px;
            border-radius: 1px;
            background-color: #563d7c;
        }

            .collapsed .icon-bar + .icon-bar {
                margin-top: 4px;
            }
}

css代碼還是比較容易理解的，主要靠@media screen來控制響應(yīng)式布局，使用的方式可以自行g(shù)oogle或baidu, 一般來講只要對768px進行一個區(qū)分，大于768為pc或pad模式， 小于768為移動端模式。 當然你還可以區(qū)分的更細，一般768px的區(qū)分已經(jīng)可以滿足大部分的需求

document.getElementsByClassName("collapsed")[0].onclick = function () {
    var nav = document.getElementsByClassName("nav-small")[0];
    if (nav.style.display == "block") {
        nav.style.display = "none";
    } else {
        nav.style.display = "block";
    }
}

javascript代碼主要是用于控制 在移動環(huán)境下顯示的 導(dǎo)航按鈕了，觸發(fā)導(dǎo)航顯示或者隱藏，還是能很簡單的理解的

考慮到移動端的瀏覽速度，框架的選型尤其重要，有些框架雖然功能強大，但是隨之尺寸也是蹭蹭蹭的往上漲。 所以在一些對速度要求比較高的項目中，或者是一個簡單的小型項目中，用原生語法的或者選擇一些很輕量級的框架會有非常明顯的效果提升。