當(dāng)網(wǎng)站設(shè)計(jì)師只需要設(shè)計(jì)網(wǎng)站的視覺時(shí)安皱，生活就開始變得更加簡單了调鬓。大多數(shù)顯示器和顯示器都很容易設(shè)計(jì)，且一種尺寸可以適合大多數(shù)屏幕酌伊。隨后腾窝，移動(dòng)互聯(lián)網(wǎng)興起了。
自從移動(dòng)互聯(lián)網(wǎng)誕生以來居砖，最大的爭論之一就是虹脯，是設(shè)計(jì)一個(gè)適應(yīng)性強(qiáng)、響應(yīng)能力強(qiáng)的站點(diǎn)來適應(yīng)不同的門戶網(wǎng)站奏候，還是設(shè)計(jì)一個(gè)獨(dú)立的移動(dòng)站點(diǎn)（其中最著名的是m(dot)為http://m.site.com/設(shè)計(jì)的URL結(jié)構(gòu)）循集。
為了我們今天的討論，我們將視m(dot)設(shè)計(jì)為歷史蔗草，它不再被認(rèn)為是一種最佳實(shí)踐咒彤，因?yàn)樗婕暗接酶俚膬?nèi)容疆柔、更少的圖像和更簡單的導(dǎo)航創(chuàng)建一個(gè)全新的站點(diǎn)。
因此镶柱，讓我們看看為多門戶生活方式設(shè)計(jì)的不同方法婆硬。
一、什么是響應(yīng)式web設(shè)計(jì)和自適應(yīng)web設(shè)計(jì)
早在本世紀(jì)初奸例，網(wǎng)頁設(shè)計(jì)的爭論就集中在固定布局和流動(dòng)布局之間彬犯。流暢的設(shè)計(jì)布局是用百分比來設(shè)置的，它們被拉伸以適應(yīng)瀏覽器的框架查吊，而固定的布局則被鎖定在由設(shè)計(jì)師設(shè)置的像素寬度決定的單一布局中谐区。
這兩種方法都不是十全十美的。雖然流動(dòng)的元素可以在多種屏幕尺寸下工作逻卖，但在寬屏顯示器上宋列，它們看起來很瘦，也不吸引人评也。固定設(shè)計(jì)在其設(shè)計(jì)的屏幕上運(yùn)行良好炼杖，但在屏幕較小的移動(dòng)設(shè)備上幾乎不可能使用。
響應(yīng)式web設(shè)計(jì)和自適應(yīng)web設(shè)計(jì)是近年來的兩個(gè)熱門話題盗迟。雖然這兩種方法都有助于滿足谷歌的建議坤邪，即站點(diǎn)可以通過移動(dòng)訪問，并具有良好的用戶體驗(yàn)和強(qiáng)大的性能罚缕，但每種方法都有其優(yōu)缺點(diǎn)艇纺。
（1）自適應(yīng)web設(shè)計(jì)
自適應(yīng)web設(shè)計(jì)(adaptive web design,AWD)與曾經(jīng)的固定設(shè)計(jì)類似，它使用基于斷點(diǎn)的靜態(tài)布局邮弹。AWD用于檢測屏幕大小并為其加載適當(dāng)?shù)牟季智狻＿@涉及到（至少）為6個(gè)屏幕寬度進(jìn)行設(shè)計(jì)。設(shè)計(jì)人員可以額外地為不同尺寸的屏幕量身定制其內(nèi)容腌乡。
這種方法確實(shí)能對樣式和內(nèi)容策略進(jìn)行一定程度的控制盟劫，這是使用響應(yīng)式設(shè)計(jì)所不需要的。但是從長遠(yuǎn)來看与纽，設(shè)計(jì)至少6個(gè)新站點(diǎn)是一項(xiàng)非常繁重的勞動(dòng)侣签。
?The Next網(wǎng)站的Carrie Cousins列舉了以下建議使用自適應(yīng)web設(shè)計(jì)的情況：
·特定于設(shè)備的體驗(yàn)是必要的
·你可以為這些設(shè)備創(chuàng)造不同的體驗(yàn)
·你可以處理和維護(hù)自適應(yīng)模板和資源，或：
·你的用戶群正在許多不同的設(shè)備上訪問您的信息(如果分析顯示70%的用戶在一臺設(shè)備上渣锦，那么自適應(yīng)UI可能不值得你浪費(fèi)時(shí)間)硝岗。
另一方面，響應(yīng)式web設(shè)計(jì)(RWD)對內(nèi)容和樣式的控制沒有AWD那么多袋毙，但是構(gòu)建和維護(hù)所需的工作要少得多。RWD就像是流體設(shè)計(jì)的后代冗尤。無論目標(biāo)設(shè)備是什么听盖，它都能適應(yīng)屏幕的大小胀溺。響應(yīng)式使用CSS媒體根據(jù)目標(biāo)設(shè)備更改樣式，然后根據(jù)設(shè)備的屏幕大小加載頁面布局皆看。
（2）響應(yīng)式web設(shè)計(jì)
“響應(yīng)式設(shè)計(jì)需要的構(gòu)建和維護(hù)工作要少得多”
由于RWD為了流暢地適應(yīng)設(shè)備窗口而在屏幕上移動(dòng)和移動(dòng)內(nèi)容仓坞，因此你需要特別注意設(shè)計(jì)的視覺層次結(jié)構(gòu)。這就是在多個(gè)設(shè)備和多個(gè)瀏覽器上進(jìn)行測試的方便之處腰吟。
許多設(shè)計(jì)師認(rèn)為響應(yīng)式設(shè)計(jì)是一種更具挑戰(zhàn)性的設(shè)計(jì)方法无埃，因?yàn)樗麄儽仨殲閹缀鯚o限的屏幕尺寸進(jìn)行規(guī)劃。即使有這樣的缺陷毛雇，RWD幾乎總是能帶來更干凈的代碼和更好的適應(yīng)性嫉称，所以它是在考慮未來的情況下構(gòu)建的。
?
二灵疮、為什么響應(yīng)式設(shè)計(jì)是web的未來
（1）更愉悅的用戶體驗(yàn)
在屏幕尺寸上沒有像AWD那樣的固有限制织阅。響應(yīng)式站點(diǎn)設(shè)計(jì)保證在任何屏幕大小上都能很好地工作，而自適應(yīng)設(shè)計(jì)只能在其布局所允許的所有屏幕上工作震捣。
（2）更快的加載速度
適應(yīng)性網(wǎng)站需要加載所有可能的布局荔棉，而響應(yīng)性網(wǎng)站只需要加載在所有平臺上運(yùn)行的布局。
（3）適應(yīng)未來發(fā)展
這是未來的趨勢蒿赢。因?yàn)樗皇芷聊淮笮〉南拗迫笥＃詿o論屏幕大小如何，你的頁面在下一代三星或iPhone(更不用說平板電腦和智能手表了)上都會(huì)加載得很好羡棵，視覺上也很美觀祥国。
最重要的是，響應(yīng)式設(shè)計(jì)會(huì)被自動(dòng)地整合到InVision Studio項(xiàng)目中(所以你沒有任何借口)!響應(yīng)式工具是Studio本身的核心原則晾腔。這允許用戶利用組件和響應(yīng)性約束輕松快速地創(chuàng)建同一屏幕的不同版本舌稀。
最后，歡迎來到這樣一個(gè)世界：你的iPad灼擂、iPhone壁查、Android和可穿戴設(shè)備版本都可以輕松地集中在一個(gè)設(shè)計(jì)文件中。
