layui栅格布局适配屏幕、适配ie8

Posted 2023-03-17

参考技术A 栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理

第一件事，最近写的项目里用到了layui这个框架里面的栅格布局，之前没有注意太多，直接就用了 layui-col-md ，没有仔细去看这些有什么区别，但是当放大缩小页面的时候会发现原本整齐的栅格布局就全都乱了，成了堆叠排列。后来仔细看了一下这些，改用 layui-col-sm 、 layui-col-lg ，由于需求需要，各种大小屏幕都要去适配，我就去官方文档看了一下改用 layui-col-xs 就没有问题了。

第二件事， layui-col-md 布局不适配ie8，所以想要在ie8中使用栅格布局，可以改用 layui-col-xs ，这样子ie8中就不会有堆叠排列的样式，就是很正常的排列方式。