使用 Poi CSS 框架
Poi CSS 框架是 INN STUDIO 的原创框架,集合了主流框架的优点以及精简了不常用的组件,并进一步优化搭配主题使用。
Grid 栅格系统
Poi CSS 的 grid 栅格系统,参考了主流栅格规格和名称的基础上添加了自定义百分比功能。
- .poi-row:栅格父类,包裹 .poi-g_* ,如下列例子。
- .poi-g_xl-1-12:在超大屏幕下划分十二分之一宽度(桌面、21:10 等超宽屏)。
- .poi-g_lg-1-2:在大屏幕下划分二分一宽度(桌面)。
- .poi-g_1-4:在所有屏幕下划分四分一宽度(手机、平板、桌面)。
- .poi-g_md-5-7:在中等屏幕下划分七分之五宽度(平板)。
- .poi-g_sm-1-1:在小屏幕下划分百分百宽度(平板小)。
使用例子:
<div class="poi-row">
<div class="poi-g_lg-1-3 poi-g_sm-1-2 poi-g_1-1">...</div>
<div>
上述例子中 poi-g_1-1
默认可省略。