css响应式布局_cuirel.css 不写响应式也能响应式的CSS框架-CSDN博客

概述

写响应式的时候最头痛的就是要调各种分辨率，PC的，平板的，各种尺寸的手机的。

今天介绍一个框架，这个是我们参考很多框架诞生而来的响应式布局框架，只需要添加几个class名字即可做出响应式的布局和列表，甚至无需考虑响应式，只需要做出PC，响应式就已经完成了。

听上去是不是很神奇呢！

框架原理

响应式布局其实也就是从5列，变4列，3列，2列，1列，只是我们需要判断当前内容适合在什么分辨率下面需要显示几列。

另外需要考虑的就是间距的对称和统一。

实现例子

以一个ul列表为例

只需要在ul上加上几个简单的名字，即可具备响应式的布局的功能了，是不是很简单呢！

框架使用说明

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

* 代表百分比

@ 代表分辨率

使用规则

响应的标签不需要在父层加上 g-row

使用两种场景

第一种是：响应式布局

class="wp"> <div class="g-row"> <div class="g-50 t-g-100">div> <div class="g-25 t-g-50 m-g-100">div> <div class="g-25 t-g-50 m-g-100">div> div></div>

pc显示

平板

手机

第二种是：响应式列表

class="wp"> <ul class="ul-list1 g-row g-li-3 t-li-2 m-li-1"> <li>li> <li>li> <li>li> <li>li> <li>li> <li>li> <li>li> ul></div>

PC 3列

平板 2列

手机上1列

总结

框架下载

http://x.5811.com.cn/css/cui-rel.css

整体就这么简单可以查看原文看看代码！