响应式布局设计是一种让同一个网页在不同屏幕分辨率下展现不同布局的方法。当浏览器的宽度达到特定数值（通常称为断点，即布局改变的临界点）时，页面的布局会发生显著变化，这便是响应式设计最重要的特点之一——分段显示。当屏幕宽度大于892px时，首先会优先压缩卡片内左右边距为20px，接着压缩图片之间的尺寸，最小为20px，最后压缩图片的尺寸。

弹性布局采用百分比作为页面的基本单位，内容在屏幕上的相对位置进行等比例缩放，这种方式不会对布局产生重大影响，适配简单。举例来说，在1倍图时，弹性布局的字体大小为16px，可以理解为16/375=4.3%，即文字占手机屏幕宽度的4.3%，因此在不同手机屏幕上，文字都按照这个比例显示，而响应式设计一般在手机上（<768px）显示文字大小为16px。

这几种设计布局并不矛盾，并不要求只能选择其中一种来实现。在某些情况下，自适应设计是在进行响应式设计时的最佳选择，因为有一些设计元素必须采用自适应设计来满足多端适配的需求。例如与输入、上传相关的键盘（只有在手机端才会弹出）；移动端平台规范的按钮（如吸底按钮位置和尺寸只有在移动端才有）；以及移动端不具备的功能（如鼠标悬停状态、鼠标点击状态）。

有人可能会问为什么选择8而不是4？许多问题并非因为大家习以为常就是正确的，我们需要了解其根本逻辑才能举一反三！网格设置通常使用8px的原因是什么？尽管目前市面上大屏设备更容易整除4这个数字，但由于过于细碎会增加决策成本，使布局排版变得更为复杂。当然，在移动端使用4、16、24、32也是没有问题的，因为移动端屏幕相对较小。Ant Design、Zan Design、Arco.Design等都选择8px作为最小的网格尺寸，因为目前主流显示屏的横向和纵向都可以被8整除，可以实现完美适配。

目前国内的APP中，内容越来越多，字体也变得越来越小。在过年回家时，发现50岁左右的中老年用户已经开始使用关怀模式，但还有许多人需要工作超过10年！大家可能会发现，与手机屏幕相比较，电脑屏幕上的字体并没有变大，这是为什么呢？根据对用户观察模型的研究和分析，用户使用手机的距离约为30厘米，而使用电脑时的距离大约为40厘米，这个差异相对较小，因此设计时通常会忽略这种差异。对于车载系统的适配，通常会进行放大处理，各个元素一般会放大到手机尺寸的2倍，以确保用户获得良好的易读性和易操作性体验。