多年來，網頁設計的世界已經發生了很大的變化。隨著它的不斷發展，移動友好的設計已成為規則，而不是例外。在為您的網站選擇適合移動設備的布局時，需要記住許多因素。

　　網站過去是用固定尺寸構建的。您可以在較小的屏幕上查看它們，但它們實際上只能在桌面屏幕上查看。如今，網站訪問者需要能夠在他們觸手可及的任何設備上訪問您網站的功能性(理想情況下，美觀)版本。因此，已經開發了三種網頁設計選項：響應式，自適應和流體設計。雖然這些網頁設計風格具有相似的功能，但它們都有獨特的優缺點，可以幫助您確定哪個適合您的下一個網站或網站重新設計。

　　一些定義

　　CSS斷點：網站“打破”成不同響應視圖的各種寬度。在下面的示例中，您可以看到 Pack 網站的四個不同的斷點。斷點是使用 CSS 中的媒體查詢創建的。

　　響應式網站設計(RWD)：使用響應式設計構建的網站使用媒體查詢來定位斷點，以縮放圖像，換行文本和調整布局，以便網站可以“縮小以適應”任何大小的屏幕。

　　自適應網站設計 (AWD)：使用自適應設計構建的網站使用 CSS 媒體查詢來識別特定的設備大小(例如，iPhone、iPad、Android 等)，并提供針對該屏幕優化的網站版本。自適應布局的一個問題是，每當發布新設備時，您都需要更新代碼，這并不理想。

　　流體網站設計：使用流體設計構建的網站使用寬度百分比。

　　固定設計：使用固定設計構建的網站依賴于固定像素寬度。雖然具有固定尺寸的設計有時可能是啟動和運行的最快方法，但它會在多個設備上提供不太人性化的方法。

　　響應式設計與自適應設計

　　響應式網頁設計

　　響應式網頁設計(RWD)由谷歌推薦和獎勵。谷歌繼續改變其算法，以容納更多不斷增長的移動用戶，因此他們在確定搜索引擎排名時會考慮網站的移動友好程度。如果您的網站不是使用RWD構建的，則它可能最終位于堆的底部。除了排名之外，響應式設計還可以通過幫助確保您的網站提供良好的用戶體驗，使某人想要在那里，從而帶來更高的利潤 。

　　但是，許多網頁設計師和開發人員一直在爭論AWD是否真的是比RWD更好的選擇，特別是對于已經擁有強大域和Web歷史記錄但需要刷新其外觀的舊網站。AWD不必徹底改造網站，這可能會讓習慣于某種外觀和感覺的消費者感到沮喪，而是允許一個更適合移動設備的網站，而沒有尷尬的過渡期。

　　自適應網頁設計

　　AWD檢測屏幕尺寸，然后從編程的選項庫中提取適當的靜態布局。有六種常見的屏幕寬度，涵蓋了用戶查看網站的大部分方式，因此所有AWD網站都應至少具有這六個選項。雖然為一個網站的設計創建多個寬度似乎是額外的工作，但它可以更好地改善整體網站性能。

　　AWD網站的好處是，您可以衡量哪些視圖和分辨率選項表現最佳，然后更改獲得最多流量的大小的設計和開發。例如，如果您的網站通過桌面設備吸引大部分流量，則需要優化網站速度、可用性、美觀度和媒體加載時間(如果適用)以獲得該用戶體驗。通過自適應設計，您可以將精力集中在首要任務上，從而節省金錢和時間。

　　對于新站點，RWD 通常是最簡單的方法。對于已經擁有桌面構建的網站，自適應很可能是一個更好的選擇，因為它具有改造能力。無論哪種設計風格適合您，執行測試和質量保證(即.QA 測試)在發布之前、期間和之后在多個設備上進行。

　　流體設計如何比較

　　第三種選擇是流體設計。流體設計具有與響應式和自適應站點相同的適應性，但流體設計不使用它們所依賴的固定單元。相反，無論您在哪個屏幕上查看網站，它都會使用相同百分比的空間。因此，它始終能夠填充頁面的寬度。當消費者從一臺設備移動到另一臺設備時，這可以使它感覺有機。但是，根據瀏覽器的大小，它也會產生挑戰。

　　例如，假設您正在較小的屏幕上查看多列Web布局，例如手機或平板電腦。內容可能看起來很擁擠，變得難以閱讀。另一方面，如果您在大型桌面或智能電視上查看網站，則內容可能會看起來很緊張。網站的樣式和功能將影響流暢的設計，包括空白量如何取決于您正在查看網站的屏幕大小。

　　流體設計的好處是用戶友好。它可以適應觀眾正在觀看的任何設備，與響應式設計相同。

　　您應該選擇哪種網頁設計風格？

　　這三種類型的設計之間有這么多相似之處，你怎么知道哪一種是最好的？公司的網站通常是潛在消費者與您的產品，業務或品牌的第一聯系點。如果用戶體驗不佳，則可能意味著收入損失和不良反饋。這就是為什么在決定哪種設計最適合您時，最重要的因素是您的受眾。誰在查看您的網站？您想查看尚未查看您網站的哪些人？而且，他們在哪種設備上查看您的網站？

　　這些信息可以通過谷歌分析，甚至通過基本的焦點小組測試找到。如果您的分析顯示跳出率很高，則您的網站可能加載速度太慢，在美學上可能不那么令人愉悅，或者可能沒有調整大小以適應用戶的屏幕。通過查明這些痛點，您將能夠確定需要解決的確切問題，然后確定哪種設計風格對您最有幫助。

　　要考慮的第二件事是，您是要構建一個全新的網站還是要使用現有網站。大多數新網站都是自動使用響應式設計制作的。較舊的網站仍然可以過渡到移動設備，但更新設計將始終改善用戶體驗 。

　　第三，澄清你的目標是個好主意。啟動或重新啟動網站所需的時間取決于您的財務資源和人力資源(即您的團隊)。制定一個行動計劃，在資源限制內提供最佳結果，這一點很重要。

　　無論您選擇哪種設計，每個設計師對響應式設計與自適應設計的看法都會略有不同，甚至為什么流體等于它們。無論您決定哪種方式，要記住的主要目標是所需的功能，對移動設備的適應性以及整體用戶體驗。