ui篇-浅谈栅格化布局(及实现)

用过Bootsrtap或者element-ui等ui框架都知道,每个ui框架里面 基本上都会自带有栅格化布局,

本文也会进行一个简单的栅格化布局的实现( 采用float方案 ), 希望对你们有所帮助

效果预览

1, html 中

嵌套结构, 外层为row, 里层为column

2, css 中

2.1 row行设置, 防止float: left带来的溢出

清除浮动, 并设置盒子模型为ie盒子模型, 这样row部分就设置好了

2.2 column 列设置 我这里是使用了24格的栅格化布局,

设置 float: left并定义初始宽度, 这里采用的是24格,所以一个的宽度是  24/100 = 1/x , 计算得出 x = 0.24  width: 4.166666666666667%

如果采用了scss或者其他css预编译器 就可使用里面的算术运算符进行计算了, 

下面就算定义每一个column具体类目的宽度了

这样简单的栅格化布局其实已经好了, 那如何实现pc切换到移动端时候,响应式自动换行及变换宽高呢呢? 

2.3 使用媒体查询, 当最大宽度大于800的时候, 我的列的类目,就呈现两倍放大

这样一个响应式的栅格化布局就写好了, 

百度百科的解释是：栅（shān）格化，是PS中的一个专业术语，栅格即像素，栅格化即将矢量图形转化为位图（栅格图像）。最基础的栅格化算法将多边形表示的三维场景渲染到二维表面。

通俗的理解，栅格化就是按照某种规则将图形像素化。

网页的栅格化 就是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：

W =（a×n）+（n-1）i

由于a+i=A，

可得： (A×n) – i = W

根据网页应用的用户属性确定最常见屏幕尺寸，从而确定版心宽度（常见为990px或1200px），再根据版心和想要栅格的网格数n推算出公式中的栅格宽度a和间隙i。按照算出的各种参数画出栅格，在栅格的基础上进行页面设计。

当然，栅格并不是万能的，如果想要有很完美的适配，还需要根据经验多尝试和分析。

王旋子同学

---