響應式布局起源于20世紀的建筑設計領域，最初用于描述建筑物根據環境變化自動調整的能力。隨著互聯網技術的發展，這一概念被引入到網頁設計中，以解決傳統固定布局在多樣化設備上的局限性。自2010年以來，隨著智能手機和平板電腦的普及，響應式布局逐漸成為網頁設計的標準實踐。
-
固定布局：內容在不同屏幕上的尺寸和布局保持不變。這種設計適用于桌面電腦，但在移動設備上顯示效果不佳
-
流式布局：將元素的寬度設置為百分比而不是固定像素值。這樣可以使網頁內容在不同屏幕尺寸下自動調整大小，但仍存在布局失控和內容擠壓的問題。
-
媒體查詢：CSS3引入了媒體查詢功能，允許開發人員根據設備的特性（如屏幕寬度、分辨率等）應用不同的CSS樣式。這種技術使得網頁可以根據設備的不同特性應用不同的布局和樣式，為響應式設計奠定了基礎
-
響應式設計：綜合利用了流式布局和媒體查詢技術，使網頁能夠根據設備的尺寸和特性動態調整布局和樣式，以適應各種屏幕大小和設備類型。這種方法提供了更一致、更靈活的用戶體驗，成為現代Web設計的主流趨勢
-
移動優先設計：隨著移動設備用戶數量的增加，設計師開始采用移動優先的設計理念，即首先為移動設備設計網頁布局和樣式，然后再逐步增強適應桌面設備。這種方法有助于確保網頁在小屏幕上的可用性和性能
響應式 UI 基于網格布局。該網格可以確保不同布局之間的視覺一致性，同時可以靈活的適配多種寬度的設計。網格列的數量取決于斷點系統。
斷點是響應式設計中的關鍵概念，它指的是屏幕寬度達到某個預設值時，布局會發生明顯變化的點。通過設置斷點，設計師可以為不同的屏幕尺寸定制不同的布局方案。
傳統頁面布局策略通常遵循這樣一種原則：即內容的多少決定了頁面的滾動長度。而頁面的水平寬度則往往被設定為一個固定值，以確保在不同設備和瀏覽器上展示時的一致性和穩定性。然而，隨著移動設備的多樣化和用戶瀏覽習慣的變化，固定的頁面寬度已無法滿足所有場景的需求。在這種情況下，響應式布局應運而生，其核心思想是使頁面的寬度能夠根據不同設備的屏幕尺寸動態調整。
媒體查詢是CSS3的一個特性，允許根據不同的設備特性（如屏幕寬度、分辨率等）應用不同的樣式規則。通過媒體查詢，設計師可以為不同的設備和視口尺寸定制不同的布局和樣式。
-
靈活性高，可以針對不同的設備特性（如屏幕寬度、分辨率、設備方向等）應用不同的樣式規則
-
允許創建復雜的響應式邏輯，如在橫屏模式下調整布局或針對特定設備優化樣式
-
可能導致CSS代碼變得復雜和難以維護，特別是當有大量不同的設備和條件需要處理時
-
需要對各種設備和屏幕尺寸有深入的了解，以確保兼容性和一致性
-
當需要為不同的設備或視口條件定制不同的布局和樣式時
-
當設計需要考慮多種設備特性，如屏幕方向變化或高分辨率顯示時
百分比寬度可以使元素的尺寸相對于其父容器進行縮放，從而實現響應式布局。百分比布局讓元素能夠根據父容器的大小變化而自動調整寬度，保持布局的靈活性。
-
使得元素的大小能夠相對于其父容器進行縮放，從而實現響應式效果
-
-
百分比布局可能在某些情況下不夠精確，特別是在需要固定元素位置或大小時
-
可能需要結合其他技術（如視口單位）來實現更精細的控制
-
-
當需要元素大小根據父容器的大小變化而變化時，如流體網格布局
-
vw（視窗寬度單位）和vh（視窗高度單位）是基于視口大小的相對單位。使用這些單位，元素的尺寸可以與用戶的視口大小同步變化，實現真正的響應式設計。
-
基于視口的單位提供了一種與設備視口大小直接相關的方法來設置元素的尺寸
-
可以創建與視口大小成比例的布局，確保在不同設備上的視覺一致性
-
對于需要非常精確控制元素尺寸的情況，視口單位可能不夠靈活
-
在某些復雜的布局中，過度依賴視口單位可能導致計算復雜和難以調試
-
當設計需要元素大小與視口大小成比例時，如全屏背景圖像或響應式圖片
-
rem（root em）單位是基于根元素（html元素）的字體大小的相對單位。通過設置根元素的字體大小，可以統一控制頁面上所有使用rem單位的元素的尺寸，實現更好的響應性和可維護性。
-
rem單位基于根元素的字體大小，提供了一種一致性更強的方法來縮放元素
-
有助于保持設計的一致性和可訪問性，因為所有尺寸都與根字體大小相關聯
-
對于沒有深入了解CSS的設計師或開發者來說，rem的計算可能有些復雜
-
在某些情況下，rem可能導致布局的縮放不如預期，特別是在與百分比或其他單位混合使用時
對于固定寬度的元素，確保它們在所有設備上都保持一致的尺寸，適用于那些不需要隨屏幕尺寸變化的元素
流式寬度的元素可以根據父容器的尺寸變化而動態調整寬度，適用于需要隨屏幕尺寸變化的元素。
元素寬度是固定的，直到受到其他元素或斷點的影響。參考產品：花瓣發現頁
推出寬度的元素在特定條件下會擴展到父容器之外，以顯示額外的內容或功能。
遮蓋寬度的元素會根據內容的需要動態調整寬度，如果內容超出父容器，將會遮蓋相鄰元素
這種布局方式結合了占滿和固定兩種布局方式的特點。元素的寬度可以動態調整以占滿屏幕空間，而高度則保持固定不變。這種布局方式適用于那些需要充分利用屏幕寬度，但高度固定不變的場景。參考產品：UI中國、知乎等
等比+斷點布局是指在不同屏幕尺寸下，元素的寬度和高度按照等比縮放，但在某些特定的屏幕尺寸下會觸發斷點，使得元素的布局方式發生改變。這種布局方式可以在不同屏幕尺寸下實現更加靈活和適應性更強的布局。參考產品：站酷首頁。
通過對目標用戶群體的設備使用情況進行研究，確定常見的屏幕尺寸范圍，如小屏幕手機、中等屏幕平板和大屏幕桌面顯示器。
為每個布局區間制定具體的布局策略，包括元素的排列方式、大小和位置。
為每個布局區間制定具體的布局策略，包括元素的排列方式、大小和位置。
為每個布局區間制定具體的布局策略，包括元素的排列方式、大小和位置。
確定頁面中的哪些元素應該在不同屏幕尺寸下保持不變，哪些元素應該隨屏幕尺寸變化而變化。
對于頁面中的固定元素，如Logo、導航欄等，為這些元素設定在不同屏幕尺寸下的尺寸和位置，確保其在任何設備上都具有良好的可見性和功能性。
根據屏幕尺寸的變化，調整卡片的位置，使其在不同屏幕上都能合理布局。
改變卡片的排列方式，如從水平排列變為垂直排列，以適應不同屏幕尺寸的布局需求。
根據屏幕尺寸調整卡片的數量，例如在較小屏幕上減少卡片數量以簡化內容，提高用戶體驗。
對于過長的文本內容，采用溢出省略的方式顯示部分內容，并用省略號表示剩余內容，確保頁面布局不被破壞。
根據屏幕尺寸調整文本的換行規則，使文本在不同屏幕尺寸下都能合理顯示，避免布局被破壞。
在保持圖片比例的同時，對圖片進行裁剪以適應不同屏幕尺寸，確保圖片內容的重點區域始終可見。
根據屏幕尺寸調整圖片的大小，確保圖片在不同屏幕尺寸下都能保持原始比例，避免變形或失真。
對于固定可見的元素，確保它們在所有設備上都保持可見，以提供穩定的用戶體驗。
對于可切換的元素，根據屏幕尺寸和用戶需求在顯示和隱藏之間進行切換，以優化空間利用和用戶體驗。
臨時可見的元素在特定條件下才會顯示，如當用戶與頁面交互時，可以臨時顯示額外的信息或操作選項。
出現模式指的是元素在用戶滾動或觸發某些動作時動態進入或退出視圖的過程。
變形模式描述元素如何根據用戶交互或屏幕尺寸變化而改變形狀、大小或布局。
分割模式涉及將內容分割成多個部分，以適應不同的屏幕尺寸和布局需求。
重排模式指的是元素在不同屏幕尺寸下重新排列，以優化空間利用和用戶體驗。
指的是元素或組件能夠根據內容的多少或者用戶的交互動作而增加額外的空間或者附加信息。這種模式常見于折疊面板、下拉菜單、模態窗口等交互元素。擴展模式的關鍵在于它提供了一種優雅的方式來處理額外的內容，而不是在所有時間里都將其展示出來，這樣可以保持界面的整潔和減少不必要的干擾。
涉及到元素在頁面上的位置變化，以響應用戶的交互或其他條件。這通常是為了重新組織頁面布局，以便為新的內容騰出空間或者將用戶的注意力引向特定的區域。位移可以是平滑的動畫效果，也可以是簡單的位置變動。需要謹慎使用，以確保用戶不會被突然的布局變化所困擾。
在進行產品設計時，我們經常會碰到包含多種元素的復雜設計單元，比如圖文結合的布局，或者是更加多元的卡片、文本和圖像的組合。面對這種復雜性，首要任務是將這些單元分解，審視并理解每個單獨元素的適配需求。然后，我們需要綜合考慮這些元素在尺寸、形態、數量以及排列上的變化，融合這些變化來制定一套綜合的適配計劃。這樣的過程旨在保證不論是在何種設備或屏幕尺寸上，這些設計單元都能維持其原有的功能和視覺效果，進而為用戶提供優質的體驗。
雖然開發團隊可能依賴于他們的經驗或遵循既定的設計標準來執行適配任務，并不總是需要設計師提供詳盡的適配指導，但設計師對適配原則的理解和掌握對于打造適用于所有用戶設備的連貫體驗至關重要。這種專業知識不僅能夠提高設計工作的效率和產出的質量，還能促進與開發團隊的有效合作，共同推動產品的成功開發。
作者：姚_Yale
鏈接：https://www.zcool.com.cn/work/ZNjgzNDY5MTY=.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
