响应式布局
栅格的响应式能力,得益于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中就不会有堆叠排列的样式,就是很正常的排列方式。