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的關鍵幀動畫，以實際例子來分享吧，也是本身在用的好比什麼點水動畫，地圖效果。

新人一枚但願和你們一塊兒學習交流啦。