對于簡單的響應式調(diào)整，如改變?nèi)萜鞯奶畛浠蜻吘?/div>
vw（視窗寬度單位）和vh（視窗高度單位）是基于視口大小的相對單位。使用這些單位，元素的尺寸可以與用戶的視口大小同步變化，實現(xiàn)真正的響應式設計。
-
基于視口的單位提供了一種與設備視口大小直接相關的方法來設置元素的尺寸
-
可以創(chuàng)建與視口大小成比例的布局，確保在不同設備上的視覺一致性
-
對于需要非常精確控制元素尺寸的情況，視口單位可能不夠靈活
-
在某些復雜的布局中，過度依賴視口單位可能導致計算復雜和難以調(diào)試
-
當設計需要元素大小與視口大小成比例時，如全屏背景圖像或響應式圖片
-
rem（root em）單位是基于根元素（html元素）的字體大小的相對單位。通過設置根元素的字體大小，可以統(tǒng)一控制頁面上所有使用rem單位的元素的尺寸，實現(xiàn)更好的響應性和可維護性。
-
rem單位基于根元素的字體大小，提供了一種一致性更強的方法來縮放元素
-
有助于保持設計的一致性和可訪問性，因為所有尺寸都與根字體大小相關聯(lián)
-
對于沒有深入了解CSS的設計師或開發(fā)者來說，rem的計算可能有些復雜
-
在某些情況下，rem可能導致布局的縮放不如預期，特別是在與百分比或其他單位混合使用時
-
在創(chuàng)建可伸縮的排版和需要保持一致性的設計中
對于固定寬度的元素，確保它們在所有設備上都保持一致的尺寸，適用于那些不需要隨屏幕尺寸變化的元素
流式寬度的元素可以根據(jù)父容器的尺寸變化而動態(tài)調(diào)整寬度，適用于需要隨屏幕尺寸變化的元素。
元素寬度是固定的，直到受到其他元素或斷點的影響。參考產(chǎn)品：花瓣發(fā)現(xiàn)頁
推出寬度的元素在特定條件下會擴展到父容器之外，以顯示額外的內(nèi)容或功能。
遮蓋寬度的元素會根據(jù)內(nèi)容的需要動態(tài)調(diào)整寬度，如果內(nèi)容超出父容器，將會遮蓋相鄰元素
這種布局方式結(jié)合了占滿和固定兩種布局方式的特點。元素的寬度可以動態(tài)調(diào)整以占滿屏幕空間，而高度則保持固定不變。這種布局方式適用于那些需要充分利用屏幕寬度，但高度固定不變的場景。參考產(chǎn)品：UI中國、知乎等
等比+斷點布局是指在不同屏幕尺寸下，元素的寬度和高度按照等比縮放，但在某些特定的屏幕尺寸下會觸發(fā)斷點，使得元素的布局方式發(fā)生改變。這種布局方式可以在不同屏幕尺寸下實現(xiàn)更加靈活和適應性更強的布局。參考產(chǎn)品：站酷首頁。
通過對目標用戶群體的設備使用情況進行研究，確定常見的屏幕尺寸范圍，如小屏幕手機、中等屏幕平板和大屏幕桌面顯示器。
為每個布局區(qū)間制定具體的布局策略，包括元素的排列方式、大小和位置。
為每個布局區(qū)間制定具體的布局策略，包括元素的排列方式、大小和位置。
為每個布局區(qū)間制定具體的布局策略，包括元素的排列方式、大小和位置。
確定頁面中的哪些元素應該在不同屏幕尺寸下保持不變，哪些元素應該隨屏幕尺寸變化而變化。
對于頁面中的固定元素，如Logo、導航欄等，為這些元素設定在不同屏幕尺寸下的尺寸和位置，確保其在任何設備上都具有良好的可見性和功能性。
根據(jù)屏幕尺寸的變化，調(diào)整卡片的位置，使其在不同屏幕上都能合理布局。
改變卡片的排列方式，如從水平排列變?yōu)榇怪迸帕校赃m應不同屏幕尺寸的布局需求。
根據(jù)屏幕尺寸調(diào)整卡片的數(shù)量，例如在較小屏幕上減少卡片數(shù)量以簡化內(nèi)容，提高用戶體驗。
對于過長的文本內(nèi)容，采用溢出省略的方式顯示部分內(nèi)容，并用省略號表示剩余內(nèi)容，確保頁面布局不被破壞。
根據(jù)屏幕尺寸調(diào)整文本的換行規(guī)則，使文本在不同屏幕尺寸下都能合理顯示，避免布局被破壞。
在保持圖片比例的同時，對圖片進行裁剪以適應不同屏幕尺寸，確保圖片內(nèi)容的重點區(qū)域始終可見。
根據(jù)屏幕尺寸調(diào)整圖片的大小，確保圖片在不同屏幕尺寸下都能保持原始比例，避免變形或失真。
對于固定可見的元素，確保它們在所有設備上都保持可見，以提供穩(wěn)定的用戶體驗。
對于可切換的元素，根據(jù)屏幕尺寸和用戶需求在顯示和隱藏之間進行切換，以優(yōu)化空間利用和用戶體驗。
臨時可見的元素在特定條件下才會顯示，如當用戶與頁面交互時，可以臨時顯示額外的信息或操作選項。
出現(xiàn)模式指的是元素在用戶滾動或觸發(fā)某些動作時動態(tài)進入或退出視圖的過程。
變形模式描述元素如何根據(jù)用戶交互或屏幕尺寸變化而改變形狀、大小或布局。
分割模式涉及將內(nèi)容分割成多個部分，以適應不同的屏幕尺寸和布局需求。
重排模式指的是元素在不同屏幕尺寸下重新排列，以優(yōu)化空間利用和用戶體驗。
指的是元素或組件能夠根據(jù)內(nèi)容的多少或者用戶的交互動作而增加額外的空間或者附加信息。這種模式常見于折疊面板、下拉菜單、模態(tài)窗口等交互元素。擴展模式的關鍵在于它提供了一種優(yōu)雅的方式來處理額外的內(nèi)容，而不是在所有時間里都將其展示出來，這樣可以保持界面的整潔和減少不必要的干擾。
涉及到元素在頁面上的位置變化，以響應用戶的交互或其他條件。這通常是為了重新組織頁面布局，以便為新的內(nèi)容騰出空間或者將用戶的注意力引向特定的區(qū)域。位移可以是平滑的動畫效果，也可以是簡單的位置變動。需要謹慎使用，以確保用戶不會被突然的布局變化所困擾。
在進行產(chǎn)品設計時，我們經(jīng)常會碰到包含多種元素的復雜設計單元，比如圖文結(jié)合的布局，或者是更加多元的卡片、文本和圖像的組合。面對這種復雜性，首要任務是將這些單元分解，審視并理解每個單獨元素的適配需求。然后，我們需要綜合考慮這些元素在尺寸、形態(tài)、數(shù)量以及排列上的變化，融合這些變化來制定一套綜合的適配計劃。這樣的過程旨在保證不論是在何種設備或屏幕尺寸上，這些設計單元都能維持其原有的功能和視覺效果，進而為用戶提供優(yōu)質(zhì)的體驗。
雖然開發(fā)團隊可能依賴于他們的經(jīng)驗或遵循既定的設計標準來執(zhí)行適配任務，并不總是需要設計師提供詳盡的適配指導，但設計師對適配原則的理解和掌握對于打造適用于所有用戶設備的連貫體驗至關重要。這種專業(yè)知識不僅能夠提高設計工作的效率和產(chǎn)出的質(zhì)量，還能促進與開發(fā)團隊的有效合作，共同推動產(chǎn)品的成功開發(fā)。
作者：姚_Yale
鏈接：https://www.zcool.com.cn/work/ZNjgzNDY5MTY=.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
