栅格化概念

miniMobile专注于移动端,移动端设计稿件标准是750px宽度 (随着移动设备的分辨率提高,640px的设计稿件已经不能满足新设备的分辨率!)

移动端并不像pc端宽度会有更大的尺寸。但是视觉中最小的字体大小,最小的间距是大致相同的

所以在合适的范围内,我们非常有必要栅格化宽度、高度、内外间距的值

为了足够细化栅格值,同时也为了节省css代码资源,规定栅格化的值为75等份。即:1等份 = 10px


注意:宽度高度都是如此,最大值分别为 w75h75,最小值分别是 w0h0

.w0{ width:0}
.w1{ width:0.1rem}
....
.w75{ width:7.5rem}

百分比12栅格栏

当然75个格子形式的栅格化是不能够完全满足宽度定义的,为此我们可以使用12格百分比布局!

注意:12格百分比默认具有浮动和块元素的css样式!

.col-1{ width:calc(100%/12*1)}
.col-2{ width:calc(100%/12*2)}
....
.col-12{ width:calc(100%)}

栅格化快速布局

栅格化系统能够快速定义宽度和高度,能够快速的排版出想要的布局大小。

建议新窗口打开,使用Chrome浏览器或Firefox浏览器的开发者模式查看!
》 新窗口打开

对比bootstrap栅格化

你一定会疑问,75等份这样真的好吗?对于移动端来说css文件会不会特别大?

下面我们单独对栅格化来做一下文件大小的比较:

miniMobile栅格系统 2.64Kb
bootstrap栅格化系统(并未算入辅助class类) 7.80Kb