快速响应式布局框架 cui-rel.css 详解

简介

cui-rel.css 是一个简单快速的布局工具，可以快速布局，做响应式的分栏，和响应式列表让你得心应手，只需要加上几个类名，就能够兼容不同分辨率的屏幕了。

看个例子

demo: https://h5.org.cn/mod_html.php?id=1549

cui-rel.css 下载地址

https://h5.org.cn/css/cui-rel.css

类名说明

按比例分配网格 5%-100%
 
 
.g-* 默认 大屏幕电脑
.p-g-* 1200以下 普通屏幕电脑
.t-g-*  960以下 平板电脑
.m-g-*  768以下 手机
.s-g-*  480以下 手机
.*-g-p0  左右间距清零，默认间距是5*2=10
.*-li-2 3 4 5 6 7 8 9 10 写在ul上控制li的宽度

显示隐藏

hide 电脑隐藏
hide-p 小屏幕隐藏
hide-t 平板隐藏
hide-m 手机隐藏
hide-s 小手机隐藏

常用布局代码

常规div布局

<div class="g-row">
    <div class="g-20 p-g-33 t-g-50 m-g-100">
        默认大屏幕宽度5列，小屏幕3列，平板2列，手机上1列
    </div>
    <div class="g-20 p-g-33 t-g-50 m-g-100">
        默认大屏幕宽度5列，小屏幕3列，平板2列，手机上1列
    </div>
    <div class="g-20 p-g-33 t-g-50 m-g-100">
        默认大屏幕宽度5列，小屏幕3列，平板2列，手机上1列
    </div>
    <div class="g-20 p-g-33 t-g-50 m-g-100">
        默认大屏幕宽度5列，小屏幕3列，平板2列，手机上1列
    </div>
    <div class="g-20 p-g-33 t-g-50 m-g-100">
        默认大屏幕宽度5列，小屏幕3列，平板2列，手机上1列
    </div>
</div>

列表分栏

<ul class="g-row g-li-5 p-li-3 t-li-2 s-li-1 ul-list">

自定义间距

.ul-list { margin:0 -20px;}
.ul-list li{ padding:0 20px;}