不规则栅格等分

原创 zxsclq 随笔 前端基础 150阅读 2018-03-13 18:39:16 举报

不规则栅格等分

最近在使用iview框架,然后再原型图的时候,遇到过一点点小问题。栅格,是目前响应式框架必不可少的一部分,例如bootstrap会将屏幕划分为12等分,iviewelement会将屏幕划分为24等份,这些想必大家都不陌生了,我这边就不说了,大家去看官方。
但是偶尔会出现一些特殊情况,就拿iview来说。iview栅格,将屏幕划分为24格,当我们等分的数量是24的约数的时候,都可以实现:例如

当我们等分时数量,不是24的约数,我们该怎么办呢?例如,我们想将屏幕分成5等分,或者七等分。我们该如何处理呢?
首先,我们要了解栅格的意义,栅格其实就是该div占屏幕的百分比,就那下面的图来说


我这边,是需要把屏幕等分成6分,然后分辨率变小的时候,给换成一行3个框,这个跳转其实就是css的媒体监听,大屏幕6等分,小屏幕3等分,实现如下

当我们需要5等分,我们该怎么实现呢?这边给大家看一个简单的

好了,大家可以去试试了。别的框架,自己F12找到对应的样式然后照着改就行了

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复