simplify the life

pure.css 源码之 grids 篇

grids,中文翻译为栅格(并不是 grid 布局),用过 BootStrap 应该不会陌生。pure.css 提供了类似的类,具体文档在 这里

具体使用也非常简单,pure-g 类似 BootStrap 中的 row。Bootstrap 是 12 等分的,pure.css 支持 5 等分以及 24 等分。

我们看一个三等分的例子:

<div class="pure-g">
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

很好理解,1-3 就是三分之一嘛,其实是从 8-24 约分过来的,其实用 8-24 也是没有问题的,源码实现就是暴力枚举而已,类似:

.pure-u-1-3,
.pure-u-8-24 {
    width: 33.3333%;
    *width: 33.3023%;
}

.pure-u-3-8,
.pure-u-9-24 {
    width: 37.5000%;
    *width: 37.4690%;
}

完整文件可以参考 grids-units.css

pure 同样支持响应式布局,实现无非就是利用媒体查询,支持 .pure-u-*.pure-u-sm-*.pure-u-md-*.pure-u-lg-* 以及 .pure-u-xl-*,具体响应式对应的屏幕尺寸可以参考 文档,具体的代码在 grids-responsive.css

另外 .pure-g 元素默认用了 flex 布局,而某些浏览器是不支持的,如果要支持这些浏览器,需要引入 grids-responsive-old-ie.css

值得一提的是 源码 中其实是没有栅格相关的代码的,完全是通过 这个插件 自动生成的

posted on 2018-06-25 20:50 子迟 阅读(...) 评论(...) 编辑 收藏

导航

统计信息

News