響應(yīng)式布局設(shè)計是一種讓同一個網(wǎng)頁在不同屏幕分辨率下展現(xiàn)不同布局的方法。當(dāng)瀏覽器的寬度達到特定數(shù)值（通常稱為斷點，即布局改變的臨界點）時，頁面的布局會發(fā)生顯著變化，這便是響應(yīng)式設(shè)計最重要的特點之一——分段顯示。當(dāng)屏幕寬度大于892px時，首先會優(yōu)先壓縮卡片內(nèi)左右邊距為20px，接著壓縮圖片之間的尺寸，最小為20px，最后壓縮圖片的尺寸。

彈性布局采用百分比作為頁面的基本單位，內(nèi)容在屏幕上的相對位置進行等比例縮放，這種方式不會對布局產(chǎn)生重大影響，適配簡單。舉例來說，在1倍圖時，彈性布局的字體大小為16px，可以理解為16/375=4.3%，即文字占手機屏幕寬度的4.3%，因此在不同手機屏幕上，文字都按照這個比例顯示，而響應(yīng)式設(shè)計一般在手機上（<768px）顯示文字大小為16px。

這幾種設(shè)計布局并不矛盾，并不要求只能選擇其中一種來實現(xiàn)。在某些情況下，自適應(yīng)設(shè)計是在進行響應(yīng)式設(shè)計時的最佳選擇，因為有一些設(shè)計元素必須采用自適應(yīng)設(shè)計來滿足多端適配的需求。例如與輸入、上傳相關(guān)的鍵盤（只有在手機端才會彈出）；移動端平臺規(guī)范的按鈕（如吸底按鈕位置和尺寸只有在移動端才有）；以及移動端不具備的功能（如鼠標(biāo)懸停狀態(tài)、鼠標(biāo)點擊狀態(tài)）。

有人可能會問為什么選擇8而不是4？許多問題并非因為大家習(xí)以為常就是正確的，我們需要了解其根本邏輯才能舉一反三！網(wǎng)格設(shè)置通常使用8px的原因是什么？盡管目前市面上大屏設(shè)備更容易整除4這個數(shù)字，但由于過于細碎會增加決策成本，使布局排版變得更為復(fù)雜。當(dāng)然，在移動端使用4、16、24、32也是沒有問題的，因為移動端屏幕相對較小。Ant Design、Zan Design、Arco.Design等都選擇8px作為最小的網(wǎng)格尺寸，因為目前主流顯示屏的橫向和縱向都可以被8整除，可以實現(xiàn)完美適配。

目前國內(nèi)的APP中，內(nèi)容越來越多，字體也變得越來越小。在過年回家時，發(fā)現(xiàn)50歲左右的中老年用戶已經(jīng)開始使用關(guān)懷模式，但還有許多人需要工作超過10年！大家可能會發(fā)現(xiàn)，與手機屏幕相比較，電腦屏幕上的字體并沒有變大，這是為什么呢？根據(jù)對用戶觀察模型的研究和分析，用戶使用手機的距離約為30厘米，而使用電腦時的距離大約為40厘米，這個差異相對較小，因此設(shè)計時通常會忽略這種差異。對于車載系統(tǒng)的適配，通常會進行放大處理，各個元素一般會放大到手機尺寸的2倍，以確保用戶獲得良好的易讀性和易操作性體驗。