讓我們假設您擁有最新版本的智慧手機，具有全方位的創新應用，時尚的設計和驚人的效能。您迫不及待想要嘗試，但似乎有一個問題。有些網頁似乎沒有調整到您的手機屏幕，甚至看起來像是壞了。怎麼會？

　　問題不在您的裝置中，而是在這些 WordPress 網站設計中。問題是在 WooCommerce 獨立站網頁設計過程中是否應用了流體，自適應或響應式設計。
 
　　這三種方法有什麼區別？
 
　　我們將在這裏詳細解釋它們，所以請留在這裏。
 
　　定義不同的設計類型
 
　　您可能聽説過響應式設計，儘管您可能不是 WooCommerce 獨立站網頁設計術語的專家。另一方面，如果您自己是 WooCommerce 獨立站網頁設計師，您知道它現在幾乎是一個標準。
 
　　但是，對網站的響應意味著什麼呢？流暢和自適應設計代表什麼？
 
　　要理解這些類型，我們必須首先定義固定設計。
 
　　固定頁面佈局
 
　　具有固定或靜態寬度佈局的頁面被設計用於特定的預定寬度，並且它們不會改變，無論顯示器寬高比或觀看者具有的屏幕尺寸。寬度以畫素值指定，最常見的寬度為 960 畫素，並且不響應不同的屏幕大小。
 
　　這種 WooCommerce 獨立站網頁設計已不再使用，但仍然有固定的網頁。當您在檢視移動是手機上的網站時出現水平滾動條，或者只有一半頁面可見，圖片被裁剪，書寫內容無法追蹤時，您可以識別它們。這可能肯定會損害頁面概述和多用户體驗，這就是固定佈局不再那麼受歡迎的原因。
 
　　流體設計
 
　　與固定佈局相反，流體或液體設計的寬度指定為百分比。它基於相對單位和比例寬度，使頁面可擴充套件，並可根據不同的屏幕尺寸進行調整。
 
　　標準屏幕尺寸曾經是 1024×768 畫素，但現在有很多人擁有更高解析度的屏幕。這就是流體設計非常有用的原因。
 
　　每當屏幕尺寸發生變化時，流體佈局的元素就會分佈在相同的空間百分比上。內容塊，影像和其他元素將根據屏幕大小拉伸或縮小。
 

 
　　為了使 WooCommerce 獨立站網頁設計流暢，您應該知道如何將其合併到代碼中。
 
　　自適應設計
 
　　自適應設計是在建立具有特定裝置和屏幕尺寸的網站或主題的過程。這意味著專門為 iMac 建立，或者為 13.3 英寸膝上型電腦，iPhone，Galaxy 手錶或具有特定顯示尺寸的任何其他裝置建立。
 
　　如果設計是自適應的，則意味著實際上建立了幾個版本的設計，每個版本都按特定尺寸製作。但是，佈局不是由自適應設計精確定義的，而是在特定的屏幕尺寸範圍內。
 
　　與流體設計相比，自適應意味著在功能多用户界面中更加確定並且具有積極的多用户體驗。另一個優點是載入自適應頁面的速度，因為沒有太多的調整和頁面應該快速載入。
 

 
　　響應式 WordPress 網站設計
 
　　為各種屏幕尺寸設計單獨的設計可能比固定頁面佈局更好，這是肯定的。但是，這也是耗時且耗能的。這就是響應式 WooCommerce 獨立站網頁設計進入現場的地方。
 
　　作為靈活網格，流暢佈局和媒體查詢的智慧使用的組合，針對不同解析度定義了特定於媒體的 CSS，響應式設計最近成為設計師的最愛之一。
 
　　響應式網站使用查詢來控制內容，因為它根據檢視者正在使用的裝置向上或向下擴充套件。它還響應多用户的行為和裝置的方向，在使用這一設計，能夠更好的考慮到《包容性設計：使每個人都可以訪問網站》。
 
　　響應式設計基於所謂的集合容器和斷點，它們在範圍內劃分可能的屏幕大小並相應地調整頁面元素。因此，在大型桌面顯示器和小型手機顯示器上，佈局可能看起來完全不同。這種類型的設計也有利於避免屏幕上的空白空間。
 

 
　　哪一個選擇？
 
　　很久以前只有一個典型尺寸的 PC 顯示器。現在，設計師面臨著設計桌上型電腦、膝上型電腦、平板電腦、閲讀裝置、手錶，當然還有各種形狀和大小的手機的挑戰。
 
　　所以，是的，如果您選擇要應用於您作為設計師工作的每個專案的設計類型，它會變得非常混亂。它應該是自適應的還是響應的？
 
　　我們建議先考慮網站目標，然後再決定設計類型。例如，如果您打算構建一個沒有移動版網頁但是原生 Android 或 iOS 應用程序的網站，那麼自適應設計可能是一個很好的解決方案。
 
　　另一方面，始終要記住，響應式設計在當今世界幾乎是必不可少的，而且許多客户實際上期望為他們的網站提供響應式設計。所以，您不想讓他們失望，是嗎？
 
　　除此之外，這些類型中的一些通常是組合的。例如，有人可能會説每個響應式設計都是流動的，但流體設計並不是響應式的。
 
　　結論
 
　　如您所見，這完全取決於屏幕尺寸和頁面佈局。
 
　　因此，如果您的最新手機具有非標準顯示寬高比或不尋常的解析度，您可能會發現很難調整某些網頁，視頻和應用以適合您的屏幕。考慮到長寬比為 18：9 的手機最近湧入市場，與標準化的 16：9 相比，但視頻甚至網站的大多數尚未調整，很明顯設計中的一些變化應該是製作。最好的解決方案是通過響應式設計自動調整它們。
 

 
　　總而言之 – 如果您希望您的網站功能齊全、可用、易於接近，並且非常愉快地進行互動，您可能希望選擇響應式設計。現在，它可能被稱為您的設計專案的理想解決方案。
 
　　我們還可以補充説，響應式設計將成為流體與自適應與響應式設計的三角形戰鬥的勝利者。