我对栅格系统、自适应、响应式的理解
2020-05-28 本文已影响0人
马爷不吃肥肉
根据网上的一些文章自己整理的个人想法，写的这么流水账主要是为了梳理自己理解。
名词解释
自适应：针对不同设备做最佳展示（如web端、ipad、手机端等）前端需要几套代码 根据不同设备调用其匹配的代码。
响应式：针对浏览器拉大或者缩小做最佳展示（也就是不用考虑其他设备，只考虑web端在不同分辨率下做最佳展示）
栅格：栅格是配合响应式的产物
常见分辨率
16:9➡️ 1336*768、1660*900、1920*1080、2540*1660（2k）、3840×2160 （超高清 4K）
4:3➡️ 1600*1200、1400*1050、1024*768
分辨率种类：物理分辨率（设备屏幕分辨率）、实际分辨率（设计稿分辨率）
逻辑像素:看这里→逻辑分辨率和物理分辨率到底是什么呀？
在同一设备上调整不同分辨率页面显示情况对比图
屏幕分辨率：1440x900
屏幕分辨率：1680x1050
结论:同一设备下分辨率越大可展示的内容越多，但肉眼看上去内容尺寸会变小。
栅格系统原理、应用场景、如何使用
栅格前端代码展示：
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 栅格，相应的槽宽也可以做响应式变化
为什么使用栅格？
web端使用栅格可以让页面 在不同分辨率下遵循规律变化，可以有依据。
参考文章：如何用栅格系统布局
