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

曹え 5811 发布于:2022-04-25 02:52:21

简介


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;}



觉得有用请点个赞吧!
1 560