那些年，我們一起玩過的響應式布局

 博客園的資源很豐富，也很精彩。不過這些精彩的東西放到一些移動終端上閱覽就不堪入目了，體驗相當不好。

  

 你可以忍受每一次打開博客，還得放大屏幕閱讀么？整個屏幕都擠滿了很小很小的文字，反正我是受夠了。

 所以，我們需要改變！！！ 先看看什么是響應式布局，你所看的這篇文章就是采用響應時布局~ （現代瀏覽器才能看到效果）

 

什么是響應式布局

我的理解就是，為了讓用戶享受更好的體驗效果，給用戶展現最有價值的信息，讓同一個頁面在不同終端上有不一樣的展現效果。比如你正在閱讀的這篇博客，當你縮小（放大）瀏覽器窗口時（先滾動頂部，因為頂部做了比較多的修改，效果比較明顯），你會看到這些神奇的效果。

正常情況下，頂部是這樣的：

稍微縮小一點，是這樣的：

• 變化一：about那個塊不見了
• 變化二：浮動的推薦&反對框偏移了

再縮小一點：

• 變化一：背景圖片不見了
• 變化二：右側sidebar塊跑到文章下面去了

還可以再小一點，

　　這個變化就相當大了，很多東西都不見了，元素的位置也改變了

　　那么，什么是響應式布局，你有了一定的理解么~

 

技術什么的不是關鍵，關鍵是設計

　　技術太普遍了，大家都會用，可是真正讓用戶感到舒適的，還是好的設計。我是這樣考慮的：

1. 屏幕分類：

　　根據移動終端的尺寸（分辨率），我大概做了這么些分類：

　　←480px   481px~700px   701px~960px   961px→

　　首先搞清楚你的用戶群所使用的終端類型和比例，這是2012年第二季度的統計數據

　　iPhone、Nokia、HTC、Samsung和Moto 五個品牌的移動終端位居前五位，占比分別為22.13%、13.98 和11.69%、10.87% 和7.47%，其次為Huawei、Sony 和ZTE 等。

　　感興趣的話，可以去搜搜這些終端的分辨率是多少，然后針對這些數據做一個分類~我不多說了。

 

2. 不同的需求

　　一個比較小的屏幕能夠容納多少數據，展現多少信息，這一點必須把握住，比如當設備寬度是480像素的時候，我們沒必要展現太多的信息，因為你展現出來用戶也不會看，這些冗余信息只會影響用戶對信息主次的判斷，甚至他們會覺得這些冗余信息太多，而跳過你的內容。

　　我的設計是這樣的：

 我的頁面只包括這些內容，像隨筆分類、隨筆檔案，友情鏈接，推薦鏈接等，這些信息又多又占空間，應該去除!

 再比如：剛開始的時候，那個推薦&反對的塊及貼在文章的右側，當窗口縮小之后，我把他放到了右下角，再小些，為了展示更多的內容，直接把他給隱藏了~

 

關於技術

技術核心是Media Query，網上都說爛了。

給推薦兩篇博文：

• The State Of Responsive Web Design

• 響應式布局這件小事

這兩個博客的布局也是響應式布局。

 

需要注意的幾個點：

　　1. head中記得加上這句話：

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

　　如果不加，效果就是本文第一章圖所示，文字會很小很多的擠在一個頁面上。

 

　　2. media query雖然好用，但是低版本IE不支持，不要糾結，咱把他給忽視掉~O(∩_∩)O~

　　如果你太固執一定要考慮的話，推薦這個：https://code.google.com/p/css3-mediaqueries-js/

<!--[if lt IE 9]>
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script> <![endif]-->

　　把這句話加到你的代碼頂部，我試過了，相當不好用，響應式效果甚微。

 

關於測試工具

　　1. 這個網站，你可以試試，戳測試工具

　　2. chrome下有一個插件，叫做Moblile/Tablet Divice Testing，下載地址：戳我

 

本文響應式布局代碼

說了半天，有些童鞋可能等不及想去試試了~

曬曬我弄的幾行代碼，有興趣的可以參考下：../file/media-480.css

/*====================== media =========================*/
@media screen and (max-width: 480px) {
    html, body {
        background: none;
    }
    ul#topMnu,
    a.minyx,
    #rss,
    #sideLeft,
    #sideRight,
    #menu,
    #profile_block {
        display: none;
    }
    div#container {
        width: 96%;
        padding: 0 2%;
        min-width: 0 !important;
    }
    div#content {
        margin-right: 0;
        float: none;
        padding-top: 310px;
    }
    div#sidebar {
        margin-left: 0;
        width: 100%;
        float: none;
    }
    .commentbox_title, 
    #tbCommentBody {
        width: 96%;
    }
    #about {
        position: absolute;
        width: 96%;
        top: 80px;
    }
    #div_digg {
        position: static;
    }
    #skyking-footer {
        margin-top: 30px;
        padding: 15px 20px 0;
    }
    #skyking-footer div {
        width: 100%;
    }
    #skyking-footer span {
        float: none;
        border: none;
        padding: 0;
        width: 100%;
        display: inline-block;
        margin-bottom: 15px;
    }
    #skyking-footer p {
        margin: 0;
        text-indent: 2em;
    }
}
@media screen and (min-width: 481px) and (max-width: 699px) {
    html, body {
        background: none;
    }
    ul#topMnu,
    a.minyx,
    #rss {
        display: none;
    }
    div#container {
        width: 96%;
        padding: 0 2%;
        min-width: 0 !important;
    }
    div#content {
        margin-right: 0;
        float: none;
    }
    div#sidebar {
        margin-left: 0;
        width: 100%;
        float: none;
    }
    #about {
        position: static;
    }
    .commentbox_title, 
    #tbCommentBody {
        width: 96%;
    }
    #skyking-footer {
        margin-top: 30px;
        padding: 15px 20px 0;
    }
    #skyking-footer div {
        width: 100%;
    }
    #skyking-footer span {
        float: none;
        border: none;
        padding: 0;
        width: 100%;
        display: inline-block;
        margin-bottom: 15px;
    }
    #skyking-footer p {
        margin: 0;
        text-indent: 2em;
    }
    #div_digg {
        right: 15px;
    }
}
@media screen and (min-width: 700px) and (max-width: 960px) {
    div#container {
        width: 96%;
        padding: 0 2%;
        min-width: 0 !important;
    }
    #wrapper {
        overflow-x:hidden;
    }
    #skyking-footer div {
        width: 100%;
    }
    #skyking-footer span {
        float: left;
        margin-bottom: 15px;
        margin-left: 1%;
        width: 22%;
        min-height: 120px;
    }
    div#sidebar div#sideRight,
    div#sidebar div#sideLeft {
        float: none;
        width: auto;
    }
    div#content {
        margin-right: 32%;
    }
    div#sidebar {
        width: 30%;
        margin-left: -30%;
    }
    #about {
        position: static;
        display:none;
    }
    #div_digg {
        right: 15px;
    }
}

 

小結

　　響應式布局是這幾年很流行的一個設計理念，隨着移動互聯網的盛行，為解決如今各式各樣的瀏覽器分辨率以及不同移動設備的顯示效果，響應式布局顯得十分重要。設計雖好，我覺得也存在諸如一下的一些弊端：

　　1. 頁面需要加載更多額外的內容，比如我們的手機看這個頁面的話，體驗效果還行，但是那些次要的內容依然被加載進來了，沒看看見是因為被我display:none給隱藏了。所以，如果想得到好的用戶體驗，同時節省流量的話，應該在加載之前做一些判斷。

　　2. 還是存在兼容性問題，要知道，現在IE6-8所占的市場份額仍然在40%+，這么龐大的用戶群我們暫時是不能忽略的，若引用其他的JS來矯正，這個太費資源，不可取，而且事實表明這些JS並不好用。

 

P.S：本文圖片都是直接截屏，沒有做優化處理，整個頁面體積過於龐大，看來圖片的優化和lazyload很有必要啊！！！下次弄一個簡潔版的lazyload用用~~

 最后。。。來一張萌圖，哈哈哈~