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