響應式佈局的應用
響應式佈局意在實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式。經過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。響應式 Web 設計是一個讓用戶經過各類尺寸的設備瀏覽網站得到良好的視覺效果的方法。例如，您先在計算機顯示器上瀏覽一個網站，而後再智能手機上瀏覽，智能手機的屏幕尺寸遠小於計算機顯示器，可是你卻沒有感受到任何差異，二者的用戶體驗幾乎同樣，這說明這個網站在響應式設計方面作得很好。html
響應式的優勢和缺點：瀏覽器
優勢：佈局
一、面對不一樣分辨率設備靈活性強。post
二、可以快捷解決多設備顯示適應問題。網站
缺點：spa
一、兼容各類設備工做量大，效率低下。scala
二、代碼累贅，會出現隱藏無用的元素，加載時間加長。設計
響應式的設計有三種方法：code
一、使用Meta標籤htm
二、經過使用媒體查詢設置樣式@Media
三、設置視圖的寬度 經過百分比
響應式的步驟：
一、使用Meta標籤
大多數移動瀏覽器將html頁面放大爲寬的視圖（viewport）以符合屏幕分辨率。你可使用視圖的meta標籤來進行重置。下面的視圖標籤告訴瀏覽器，使用設備的寬度做爲視圖寬度並禁止初始的縮放。在<head>標籤里加入這個meta標籤。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
二、經過使用媒體查詢設置樣式@Media
@media screen and (min-width:640px)and(max-width:960px)
這句的意思是在大於640小於960的分辨率下所激活的樣式表，這個語句就是響應式佈局的基礎應用了。在判斷終端分辨率大小後，賦予不一樣的樣式進去，就像下面的例子：
@media screen and(max-width:560px){
body{}
}
最大是560的分辨率
@media screen and (min-width:640px)and(max-width:960px){
body{}
}
640到960之間的分辨率
三、設置視圖的寬度
經過百分比控制寬度也能實現響應式,不用像素px這種固定的單位來控制，也可使用em來定義
例如：#heade{width:100%}
#footer{width:60%;}
-
每一个你不满意的现在，都有一个你没有努力的曾经。