響應式佈局學習總結

響應式佈局其實就是技術的綜合。若是對html5,css3,jquery比較熟悉的話，那麼學習響應式佈局很是簡單。

響應式佈局無非就是利用css3的新特性來使頁面適應不一樣的分辨率，如電腦中的1024*768，800*600，手機的320*480等等屏幕分辨率。

若是咱們要實現比較複雜的功能，例如bootstrap中的nav，咱們須要藉助jquery來實現相關操做。咱們在開發響應式網站時，簡單的能夠本身定義樣式，複雜的徹底能夠使用bootstrap。

響應式佈局使用的css技巧主要有：
1.百分比。在設置元素的樣式時，應使用百分比，而不是固定的數值，尤爲是圖片的縮放，更是使用百分比，若是須要能夠設置max-width。百分比的計算公式爲：

目標元素寬度 / 上下文元素寬度=百分比寬度

如將固定寬度

#wrap {
    width:960px;
}
#header{
    width:940px;
    margin-left:10px;
    margin-right:10px;
}
img{
    max-width:100%;
}

html

<div class="wrap">
<div class="header"></div>
</div>

改成百分比佈局

#wrap {
    width:96%;
}
#header{
    margin-left:1.041666666%  /* 10/960 */
    margin-right:1.041666666% /* 10/960 */
    width:97.9166667%;  /*940/960*/
}

2.em替換px。em替換px主要應用於文字縮放。計算公式爲

目標元素尺寸 / 上下文元素尺寸 = 百分比尺寸

例如將下面的元素px

#wrap{
    font-size:16px;
}
#content h1{
    font-size:69px;
}

瀏覽器默認字體是16px，因此能夠改成：

#wrap{
    font-size:100%;
}
#content h1{
    font-size:4.3125em;   /* 69 / 16 */
}

3.媒體查詢。這也是響應式查詢的重點，頁面之因此能適應不一樣的窗體大小，也是由於媒體查詢。媒體查詢理解起來很是簡單，就是在不一樣的窗體下，定義不一樣的樣式。例如：

/*窗體最大寬度960是執行*/
@media screen and (max-width:960px){
    body{
        background-color:red;
    }
    h1{
        font-size:14px;
    }
}
/*窗體最大寬度768是執行*/
@media screen and (max-width:768px){
    body{
        background-color:orange;
    }
    h1{
        font-size:12px;
    }
}
/*窗體最大寬度320是執行 手機*/
@media screen and (max-width:320px){
    body{
        background-color:green;
    }
    h1{
        font-size:10px;
    }
}

若是咱們須要引用樣式，能夠在頁面添加

<link rel="stylesheet" type="test/css" media="screen" href="樣式表地址" />

4.響應式佈局兼容性。手機瀏覽器都兼容響應式佈局，電腦瀏覽器中最新瀏覽器支持。ie8如下瀏覽器不支持，升級也比較麻煩。網上也有技巧兼容ie8瀏覽器，不過我測試了一下，ie8下是妥協支持了，之因此說妥協，是由於有些效果也不支持，ie6,ie7基本都不支持。尤爲是讓我生氣的是，ie8妥協支持了，在chrome中有些效果感受變形了。哎，ie8瀏覽器仍是放棄吧，畢竟是爲手機用戶開發。

響應式佈局的開發基本上就是以上四點，在加上html5。html5是進行頁面佈局的。若是須要加些特效，這時就能夠使用jQuery。