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

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

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

點(diǎn)擊菜單前 和 點(diǎn)擊菜單后的效果

    
    
    
    


    

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

    

        

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

    

        

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

    

        

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

    

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

一個(gè)典型的針對(duì)移動(dòng)端優(yōu)化的站點(diǎn)包含:

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

2.一個(gè)只在移動(dòng)瀏覽器下顯示的按鈕

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

    

        

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

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

    

        

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

大家可能會(huì)問(wèn)，為什么需要兩段導(dǎo)航代碼呢，不是可以寫一段pc和移動(dòng)公用么，一開(kāi)始我也是這樣寫的，但是發(fā)現(xiàn)pc端縮窄瀏覽器的時(shí)候，分辨率相當(dāng)于移動(dòng)端，然后用按鈕控制了導(dǎo)航隱藏之后，再擴(kuò)張瀏覽器， 導(dǎo)航還是隱藏的。
只要不去拉縮網(wǎng)頁(yè)就沒(méi)問(wèn)題，但是為了體驗(yàn)的完美，犧牲下代碼共用性吧，寫了兩段導(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來(lái)控制響應(yīng)式布局，使用的方式可以自行g(shù)oogle或baidu, 一般來(lái)講只要對(duì)768px進(jìn)行一個(gè)區(qū)分，大于768為pc或pad模式， 小于768為移動(dòng)端模式。 當(dāng)然你還可以區(qū)分的更細(xì)，一般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代碼主要是用于控制 在移動(dòng)環(huán)境下顯示的 導(dǎo)航按鈕了，觸發(fā)導(dǎo)航顯示或者隱藏，還是能很簡(jiǎn)單的理解的

考慮到移動(dòng)端的瀏覽速度，框架的選型尤其重要，有些框架雖然功能強(qiáng)大，但是隨之尺寸也是蹭蹭蹭的往上漲。 所以在一些對(duì)速度要求比較高的項(xiàng)目中，或者是一個(gè)簡(jiǎn)單的小型項(xiàng)目中，用原生語(yǔ)法的或者選擇一些很輕量級(jí)的框架會(huì)有非常明顯的效果提升。