帮助你生成响应式布局的CSS模板 - xyCSS

我就是我 2022-03-31 03:20 225阅读 0赞

日期：2013-1-31  来源：[GBin1.com][]

[![帮助你生成响应式布局的CSS模板 - xyCSS][CSS_ - xyCSS]][CSS_ - xyCSS_CSS_ - xyCSS]

[在线演示][Link 1]

在前面的文章中我们介绍了响应式的网格**[profound grid][]**，用来帮助你开发固定或者响应式的流动布局设计，如果你希望使用纯CSS生成响应式的布局的话，相信**[xyCSS][]**将会是一个不错的选择，xyCSS是一个简化的轻量级CSS框架，只使用一个CSS文件，能够帮助你创建流动或者响应式的布局。

这个框架包含了结构和版面字体相关的样式定义，帮助你有效的使用语义化方式管理你的布局结构。

## **主要特性** ##

*  通过CSS的media queries来生成响应式的设计
 *  通过使用CSS reset来解决缺省浏览器的样式问题
 *  水平风格的流体网格布局
 *  垂直风格的可缩放印刷版网格风格
 *  不使用class属性定义
 *  为HTML5设计，支持任何标记
 *  通过CSS3加强
 *  动态的media query过渡效果
 *  支持移动，iphone/ipad，桌面大屏幕
 *  支持prent media的网格样式定义
 *  轻量级的单个css文件
 *  开源并且免费使用
 *  拥有完善的文档和在线演示
 *  支持各种不同类库，例如，jQuery插件，兼容wordpress插件等等

## 如何使用？ ##

*  [步骤1 : 下载安装][1 _]
 *  [步骤2 : 水平的网格Horizontal Grid][2 _ _Horizontal Grid]
 *  [步骤3 : 垂直网格Vertical Grid][3 _Vertical Grid]
 *  [步骤4 : 响应式Responsiveness][4 _ _Responsiveness]
 *  [使用xy.css设计][xy.css]
 *  [视觉化网格][Link 2]
 *  [支持IE][IE]
 *  [更多信息][Link 3]

via [ gbtags][gbtags]

来源：[帮助你生成响应式布局的CSS模板 - xyCSS][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/css/20130131-responsive-layout-css-template/
[CSS_ - xyCSS]: http://www.gbin1.com/technology/css/20130131-responsive-layout-css-template/title.jpg
[CSS_ - xyCSS_CSS_ - xyCSS]: http://www.gbin1.com/technology/css/20130131-responsive-layout-css-template/index.html
[Link 1]: http://www.gbin1.com/gb/share/299.htm
[profound grid]: http://gbin1.com/gb/share/236.htm
[xyCSS]: http://xycss.com/
[1 _]: http://xycss.com/xy/docs/#step-01
[2 _ _Horizontal Grid]: http://xycss.com/xy/docs/#step-02
[3 _Vertical Grid]: http://xycss.com/xy/docs/#step-03
[4 _ _Responsiveness]: http://xycss.com/xy/docs/#step-04
[xy.css]: http://xycss.com/xy/docs/#design
[Link 2]: http://xycss.com/xy/docs/#visual-grid
[IE]: http://xycss.com/xy/docs/#ie-support
[Link 3]: http://xycss.com/xy/docs/#more-info
[gbtags]: http://gbin1.com/gb/share/299.htm