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

彈性布局采用(yòng)百分(fēn)比作爲頁面的(de)基本單位，内容在屏幕上的(de)相對(duì)位置進行等比例縮放，這(zhè)種方式不會對(duì)布局産生重大(dà)影(yǐng)響，适配簡單。舉例來(lái)說，在1倍圖時(shí)，彈性布局的(de)字體大(dà)小爲16px，可(kě)以理(lǐ)解爲16/375=4.3%，即文字占手機屏幕寬度的(de)4.3%，因此在不同手機屏幕上，文字都按照(zhào)這(zhè)個(gè)比例顯示，而響應式設計一般在手機上（<768px）顯示文字大(dà)小爲16px。

這(zhè)幾種設計布局并不矛盾，并不要求隻能選擇其中一種來(lái)實現。在某些情況下(xià)，自适應設計是在進行響應式設計時(shí)的(de)最佳選擇，因爲有一些設計元素必須采用(yòng)自适應設計來(lái)滿足多(duō)端适配的(de)需求。例如與輸入、上傳相關的(de)鍵盤（隻有在手機端才會彈出）；移動端平台規範的(de)按鈕（如吸底按鈕位置和(hé)尺寸隻有在移動端才有）；以及移動端不具備的(de)功能（如鼠标懸停狀态、鼠标點擊狀态）。

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

目前國内的(de)APP中，内容越來(lái)越多(duō)，字體也(yě)變得(de)越來(lái)越小。在過年回家時(shí)，發現50歲左右的(de)中老年用(yòng)戶已經開始使用(yòng)關懷模式，但還(hái)有許多(duō)人(rén)需要工作超過10年！大(dà)家可(kě)能會發現，與手機屏幕相比較，電腦(nǎo)屏幕上的(de)字體并沒有變大(dà)，這(zhè)是爲什(shén)麽呢(ne)？根據對(duì)用(yòng)戶觀察模型的(de)研究和(hé)分(fēn)析，用(yòng)戶使用(yòng)手機的(de)距離約爲30厘米，而使用(yòng)電腦(nǎo)時(shí)的(de)距離大(dà)約爲40厘米，這(zhè)個(gè)差異相對(duì)較小，因此設計時(shí)通(tōng)常會忽略這(zhè)種差異。對(duì)于車載系統的(de)适配，通(tōng)常會進行放大(dà)處理(lǐ)，各個(gè)元素一般會放大(dà)到手機尺寸的(de)2倍，以确保用(yòng)戶獲得(de)良好的(de)易讀性和(hé)易操作性體驗。