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