html5+css3+jquery完成響應式布局

響應式布局，流體布局，自適應布局，靜態布局等等，這是移動設備的飛速發展，前端人員不得不跟上潮流的一個方向。實際上各種設備尺寸，分辨率大都不同，真的適應各種設備依舊是不現實的，首先是瀏覽器差異化，讓我們去hack，現在是終端問題，讓我展現出不同的設備不同的樣式，折騰來折騰去，終於我們走進了熱火朝天的響應式布局，自適應只能算是響應式布局的一個子集吧，對於流體個柵格后面會再次提到，有興趣可以關注。

首先講講實現原理吧，css3的媒體查詢功能的確幫了我們很大一個忙，@media query，它的出現也帶出了響應式布局的一連串東西，經典的是來自國外偉人的布局這里就不多闡述，我待會兒會提出一個實際的例子，本人測試過有效。@media query它可以檢查我們的設備的分辨率，但是我們往往是設置一個區間，這樣一個區間一個區間的去布局代碼，讓我們在手機端打開是一個效果，pc端一個效果，平板一種樣式。

注意一點，手機網站不等於在手機端打開網頁，這是兩個不同的概念。手機網站我一直是使用jquery mobile 實現的前端設計，話不多說看代碼：

html：

<div class="navBox">
    <div class="nav">
        <ul>
        <li class="current"><a href="#" target="_blank">首頁<small>home</small></a></li>
        <li><a href="#" target="_blank">電影<small>movie</small></a></li>
        <li><a href="#" target="_blank">電視劇<small>tv play</small></a></li>
        <li><a href="#" target="_blank">動漫<small>comic</small></a></li>
        <li><a href="#" target="_blank">綜藝<small>variety</small></a></li>
        <li><a href="#" target="_blank">紀錄片<small>documentary</small></a></li>
        <li><a href="#" target="_blank">公開課<small>public resourse</small></a></li>
        </ul>
        <!--match IE9,IE10 or not ie-->
        <!--[if (get IE 8) | ! (IE)]><!-->
        <h1 class="title"><a href="#">騰訊視頻</a><span class="btn"><img src="image/btn.png" width="34" height="34" alt=""/></span></h1>
        <!--<![endif]-->
    </div>

這里識別了一次ie,但是我並沒有設置其IE6-8的樣式，就測試玩玩。

css：

@charset "utf-8";
/* CSS Document */
*{
    padding:0px;
    margin:0px;
    border:0px;
}
.navBox {
    width:100%;
    height:40px;
    background:#333;
}
.nav{
    margin:0 auto;
    border:0px solid #ccc;
}
.nav ul {
    list-style:none;
    width:auto;
}
.nav ul li {
    height:40px;
    text-align:center;
}
.nav ul li a {
    display:block;
    font-size:16px;
    text-decoration:none;
    line-height:39px;
    color:rgba(103,204,247,1.00);
}
@media screen and (min-width: 1000px) {
.nav{
    width:1000px;
    height:40px;
}
.nav ul li {
    float:left;
    width:auto;
    min-width:120px;
    margin-left:10px;    
}
.nav ul li.current {
    background:#f60;
}
.nav ul li:hover a {
    background-color:#f60;
}
.nav ul li.current:hover a {
    color:#fff;
}
.nav .title {
    display:none;
}    
}
@media screen and (min-width: 640px) and (max-width: 1000px) {
.nav {
    width:auto;
    height:40px;
}
.nav ul li {
    float:left;
    width:14%;
    min-width:80px;
    font-size:12px;
    line-height:20px;
}
.nav ul li.current {
    background-color:#f60;
}
.nav ul li:hover a {
    background-color:#f60;
}
.nav ul li.current:hover a {
    color:#fff;
}
small {
    display:none;
}
.nav .title {
    display:none;
}    
}
@media screen and (max-width: 640px) {
    .navBox {
        height:auto;
        background:#444;
    }
    .nav {
        width:auto;
        height:auto;
    }
    .nav ul {
        position:relative;
        display:none;
    }
    .nav ul li {
        width:100%;
        min-width:100px;
        background:#333;
    }
    .nav ul li a:active,
    .nav ul li a:hover {
        background-color:#f60;
        transition:all ease-in 0.3s;
    }
    .nav ul li.current{
        background-color:#f60;
    }
    .nav .title {
        position:relative;
        width:100%;
        height:40px;
        border-top:1px solid #444;
        background:#333;
        text-align:center;
        letter-spacing:1px;
        font-size:24px;
        line-height:40px;
    }
    .nav .title a {
        color:#f60;
        text-decoration:none;
    }
    .nav .title .btn {
        position:absolute;
        right:10px;
        top:0px;
        width:34px;
        cursor:pointer;
    }
    }

我把屏幕區間設置成三個不同的區間，@media screen and (min-width: 1000px){//放置像素1000+屏幕的css樣式渲染網頁，這里是做的導航菜單}

@media screen and (min-width: 640px) and (max-width: 1000px){//這里放置屏幕像素640到1000的css樣式}

@media screen and (max-width: 400px) {//這里放置小於等於640像素的樣式}

三個區間可以按照你的興趣或者要求設置成不同的樣式，不過大體樣式建議相同，不然用戶一打開了發現傻缺了，咋個不是這個網站了哇，於是果斷關閉那就尷尬了。

jquery代碼：

<script type="text/javascript">
$(document).ready(function (){
    $(".btn").on("click",function(){
        $(".nav").find("ul").slideToggle(400);
        });    
})
</script>

腳本代碼很簡單了，我就簡單不去分辨他在那個區間了，因為他只有在屏幕像素小於640像素的時候才會出現並且被看到，其他的情況我都將其display隱藏了，完成這一步就可以看到我點擊旁邊的縮放標簽彈出UL標簽，下滑上拉的效果，總體來說還是非常簡單的，下面附上三張對應不同尺寸的效果圖。

像素位於1000+的時候：

像素位於640到1000時：

像素小於640時：

點擊下拉收起：

就完成了這次的導航響應式布局操作，后面還會分享更多內容，在這里我個人覺得dwcc2015+版本的軟件對於前端來說有一定的好處，就是可以調整屏幕像素進行布局，當然了其中的bootstrap組件也可以完成相應的內容啦，而且還有精致的魔板提供給你，當然了純屬個人愛好，有興趣的朋友可以下載去玩玩。

后面我還會分享更多，包括html5的canvas動畫，和transform的關鍵幀動畫，以實際例子來分享吧，也是自己在用的比如什么點水動畫，地圖效果。

新人一枚希望和大家一起學習交流啦。