自适应col自动换行显示_栅格系统、自适应、响应式

留言区自适应

针对不同设备终端做最佳展示(如web端、ipad、手机端等)前端需要几套代码 根据不同设备调用其匹配的代码。

响应式可以简单理解为针对浏览器拉大或者缩小做最佳展示(也就是web端在不同分辨率下做最佳展示) 栅格 运用固定的格子，遵循一定的规则，进行页面的布局设计(栅格是配合响应式的产物)

---

自适应

同一页面在不同终端下，以最佳效果展示(需要多套代码)

响应式

不同分辨率下通过调整布局样式达到最佳展示效果(只需要一套代码)与栅格配合使

图片地址

https://blog.prototypr.io/the-a-r-model-17ce2bbeec71

---

栅格栅格系统与响应式天生一对，在web端响应式配合栅格可以让页面 在不同分辨率下遵循规律变化，使布局规范简洁有规则。

 前端代码：ant-col-xs-24 ant-col-sm-12 ant-col-md-12 ant-col-lg-12 ant-col-xl-6(截取了蚂蚁金服的设计代码：蚂蚁金服栅格例子)

(配合代码理解栅格，能更清楚理解栅格的实现方式)

分辨率大于1200一行显示4个

分辨率小于1200显示2个

注：分辨率变化格子的宽度是不变的只是所占的格子数量发生变化如下图

分辨率变小后，所占格子数量由12个变为10个

网上给的参考：甚至可以做到在超高分辨率下(2K 以及 4K)采用 24 栅格，在中高分辨率下(1280~1920)使用 12 栅格，在低分辨率下(320~800)使用 8 栅格，相应的槽宽也可以做响应式变化

---

常见分辨率

16:9→ 1336*768、1660*900、1920*1080、2540*1660(2k)、3840×2160 (超高清 4K)

4:3→   1600*1200、1400*1050、1024*768

分辨率种类：物理分辨率(设备屏幕分辨率)、实际分辨率(设计稿分辨率)

逻辑像素 看这里→逻辑分辨率和物理分辨率到底是什么呀？ https://www.zhihu.com/question/40506180

在同一设备上调整不同分辨率页面显示情况对比图

屏幕分辨率：1440x900

屏幕分辨率：1680x1050

动态展示

结论:同一设备下分辨率越大可展示的内容越多，但肉眼看上去内容尺寸会变小。