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