浅谈网页栅格化

随着设备的增多，屏幕尺寸也越来越多，了解栅格化的计算方法会对各种屏幕大小之间的转换起到基础作用。当然，作为小白，我对于栅格化也有很多不理解之处，如果有有用的资料可以评论区互相交流。

1. 什么是栅格化？

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

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

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

2. 如何计算栅格？

栅格化公式

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

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

由于a+i=A，

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

3. 如何应用？

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

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

---

王旋子同学