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