響應式設計與自適應設計
相信從事前端頁面設計的人都知道，頁面呈現的效果及用戶體驗是非常重要的。當今社會移動設備的使用已超過了pc端，面對不同分辨率的設備，怎樣做到頁面體驗的效果一樣呢？這就成了最頭疼的事情。
下面我們來看看響應式設計與自適應設計兩者用法：
響應式Web設計(Responsive Web Design) ：主要利用CSS3的媒介查詢（Media Query）和Viewport來解決問題。通過媒介查詢的設置，根據屏幕寬度、屏幕方向等各個屬性來加載不同場景下不同的CSS文件來渲染頁面的視覺風格。
具體使用方法如下：
1、meta標簽的viewport屬性
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”/>
視窗寬度width=device-width為設備寬度
視窗縮放initial-scale=1為不可縮放狀態 maximum-scale=1為不可放大
user-scalable=0 是否允許用戶調整縮放，如果設置為yes則允許用戶對其改變，反之則為no，如果設置為no，那么minimum-scale和maximum-scale都將被忽略，用為根本不可能縮放。所有縮放的值都必須在0.01-10的范圍之內。
2、media query（兩種方式）
a：通過link標簽
<link rel=”stylesheet” type=”text/css” media=”screen and(max-width: 600px)” href=”style1.css”/>
示例代碼代表當前屏幕寬度小于600px的時候，加載style1.css文件來渲染頁面。
b：CSS中直接設置
@media screen and(max-width: 600px){
/* 具體的CSS屬性設置 */
}
從上面的例子可以看出，字符間以空格相連，選取條件包含在小括號內。only（限定某種設備，可省略），and（邏輯與），not（排除某種設備）為邏輯關鍵字，多種設備用逗號分隔，這一點繼承了CSS基本語法。
3、優點
面對不同分辨率設備靈活性強
能夠快捷解決多設備顯示適應問題
4、缺點
兼容各種設備工作量大，效率低下
代碼累贅會出現隱藏無用的元素，加載時間加長
一定程度上改變了網站原有的布局結構，會出現用戶混淆的結果
自適應網頁設計（Adaptive Web Design）：指能使網頁自適應顯示在不同大小終端設備上新網頁設計及技術。
主要注意的問題如下：
1、首先在網頁代碼頭部，加入一行viewport元標簽
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”/>
所有主流瀏覽器都支持這個設置，包括IE9，對于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js
<!—[if lt IE 9]>
<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]-->
2、不使用絕對寬度，由于網頁會根據屏幕寬度調整布局，不能使用width: xxx px具體的像素值，使用百分比width:xxx %或者width:auto
3、相對大小的字體，字體也不能使用絕對大小（px），而只能使用相對大小（em）設置body字體為100%，即字體大小是頁面默認大小的100%，也是16px。例如：p{ font-size: 1.5em; }，即p的大小是默認大小的1.5倍（24px（ 24/16=1.5 ））。
4、流動布局：各個區塊的位置都是浮動的，不是固定不變的。
.left {
float: left;
width: 20%;
}
.right {
float: right;
width: 75%;
}
Float的好處是，如果寬度太小放不下兩個元素，后面的元素會自動滾到前面元素的下方，不會再水平方向溢出，避免了水平滾動條的出現。注：絕對定位（position: absolute）的使用，也要非常小心。
5、圖片的自適應
img { max-width: 100%; height: auto }
這行代碼對于大多數嵌入網頁的視頻也有效果，所以可以寫成：
img object { max-width: 100%; height:auto}
老版本的Ie不支持max-width，所以只好寫成：
img { width: 100%; height:auto}
此外，windows平臺縮放圖片時，可能出現圖像失真現象，這時可以嘗試使用IE的專有命令：
Img { -ms-interpolation-mode: bicubic }
或者Ethan Marcotte的imgSizer.js
addLoadEvent(function(){
var imgs = document.getElementById(“content”).getElementsByTagName(“img”);
imgSizer.collate(imgs);
})
注：自適應網頁設計的核心，就是CSS3引入的Media Query模塊，與響應式布局設計的使用一樣。
兩者區別與選擇：
理論上說，響應式布局在任何情況下都比自適應布局好一些，但在某些情況下自適應布局更切實際。
自適應布局可以讓你的設計更加可控，因為你只需要考慮了了幾種狀態就萬事大吉了。但在響應式布局中你可能需要面對非常多狀態——是的，大部分狀態之間的區別很小，但它們又的確是不同的——這樣一來就很難確切搞清你的設計會是什么樣。同時這也帶來了測試上的難題，你很難有絕對的把握預測到它會怎樣。換個角度說，這也是響應式布局的魅力所在。通過允許表面上的不確定因素存在，你可以獲得更高層次上的確定。雖然你無法在精確到像素級別準確預知你的設計如何在943px×684px視覺區域匯中展示，但你能確定的是它們一定能展示的很好——不管是表層特征還是布局結構都有條不紊。
自適應布局有它自己的優勢，因為它們實施起來代價更低，測試更容易，這往往讓他們成為更切實際的解決方案。自適應布局可以看做響應式布局的“窮兄弟”，在資源有限的情況下就可以讓它出馬。特別是改進現有網站的時候尤其奏效，因為全部重寫代碼在這時并不可行。這種案例中，采用自適應布局是一個不錯的出發點。
其實無論是哪種設計理念都是各有優缺的，還是要從個人實際去求出發去選擇！
