彩票走势图

13款有用的响应式CSS网格框架

原创|行业资讯|编辑:郝浩|2014-06-26 18:16:50.000|阅读 1434 次

概述:本文介绍了13款不错的响应式CSS网格框架供大家分享

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

在当今互联网产业,响应式网络设计变得越来越重要。用户可通过对网络的缩放、平滑、滚动等小操作进行阅读和导航,从而可以获得从桌面到手机等多种平台的相同用户体验。

在网络上有很多种基于响应式网络设计技术的CSS网格系统,比较有名的、等,我们今天要介绍它们?不, 不!不同的人习惯和偏好不同,好的不一定是对的,何况你们对它们太熟悉了不是?我们现在要做的就是尽可能的罗列出更多有用的响应式CSS网格框架,供大家来选择。下面就是为大家推荐的13款响应式CSS网格框架

1.Gumby - 960网格系统的响应式CSS框架


Gumby

Gumby是一种新的960网格系统的响应式CSS框架,它包含拥有不同列变化(12列、16列及两种混合)的多种类型的CSS网格,允许你通过优化桌面和移动设备上现有的流动或固定布局来创建新的灵活布局。

2.ResponsiveAeon – HTML5的网格系统框架


ResponsiveAeon

ResponsiveAeon是Aeon 的一个新版本框架,它有一个基于12列、全宽1104px的响应式网格系统。它的全部框架都是由HTML5设计的——将包括article、aside、details、 figcaption、figure、 footer、 header、 hgroup、menu、nav、 section、dialog、 audio、 canvas、video等HTML5新元素都加入进 html.js 文件里了。整个框架只有120多行代码和3个基本类(1个Container类,另外2个是Content 和 Col类),它能够让你容易快速的构建简单、干净、漂亮的模型/线框图甚至是成熟的网站。

3.Ingrid - CSS流动布局系统


Ingrid

Ingrid是一个简单、容易使用、轻量级的CSS流动布局系统,它的设计的主要目的是为了减少个体单位中对类的使用,以确保其在响应式布局里更具条理化。Ingrid同样是一个可扩展的系统,用户可很容易的根据自己的需求进行定制。

4.Titan Framework


Titan Framework

Titan Framework 是一个简单易使用的用于创建响应式网络设计的CSS框架,它使用与960网格系统完全相同的CSS类。所以,如果你已经有用960网格系统开发的网站,可以通过将960网格系统的CSS文件替换为Titan Framework的CSS文件的方式在几分钟以内将它切换为Titan Framework的响应式设计。另外值得一提的是,使用Titan Framework可以在最大宽度下适应任何尺寸的屏幕分辨率。

5.Foundation 3


Foundation 3

Foundation 3是由Saas CSS预处理器构建的最好最先进的前端响应式框架之一。 这个基于灵活CSS网格的完整框架可以快速和有逻辑性的创建漂亮的页面布局,使系统充满灵活性和可嵌套性。 此外,框架还提供各种类型的风格和web元素(比如创建可点击原型的形式、按钮和标签)。

6.Gridiculous – 完全响应式样板


Gridiculous

Gridiculous是一个基于12列网格的完全响应式样板,你可以设置站点的最大宽度为1200px、 960px、 640px、320px或者延伸至全宽。使用Gridiculous框架,不管使用的屏幕大小,你都可以在分隔开各列、为各列创建嵌套的同时确保图片和视频保持充分响应。

7.Responsive Grid System


Responsive Grid System

Responsive Grid System是一个基于流动网格的CSS框架 。它被用于响应式网站的快速直观开发。所有媒体库都可在标准设备、清除浮动和可选重置中使用12、16和24列的网格。

8.1140 CSS Grid


1140 CSS Grid

1140 CSS Grid是一个基于12列网格的CSS响应式网格系统,它对于创建桌面和移动设备上的网站来说十分友好——完全支持1280的桌面显示器和更小的移动设备显示屏。这个框架具有很强的流动性,从移动设备到平板电脑,浏览器的宽度能够自动调整。所有的12列会被分成每部分2列、3列、4列或者6列或者是许多不均匀的组合,比如5列加7列,或者是5列加4列加3列。

9.Less+ Framework


Less+ Framework

Less+ Framework是流行的CSS网格框架Less Framework的扩展版,这两个框架之间唯一的区别是Less+ Framework提供了对IE的支持。 Less+允许设计者和开发者构建能够根据浏览器屏幕分辨率来修改内容的网站。

10.Susy – 用于指南针性质的响应式CSS网格


Susy

Susy是一个响应方式如同抽象的指南针一样的CSS网格系统。它的内部是流动的,可在任何时候做好响应的准备,通过把你的选择装在“糖果盒”里,在你确定让它们在何时何地怎么做时进行快速响应。

11.YAMB - “移动设备上的又一个样板”


YAMB

YAMB是Yet Another Mobile Boilerplate的简称 (直译“移动设备上的又一个样板”),它是一个小型的全套工具和快速设计响应式网站的向导。所有用YAMB设计的网站,小到320 px 屏幕的手机大到智能手机和平板电脑,都是经过了特别优化的。

12.Wirefy


Wirefy

Wirefy是一个基于响应式浏览器的线框图框架,它拥有卓越的用户体验和测试功能特性(是用于找寻解决客户端通信问题的最好方法),能够快速构建令人印象深刻的网络设计和布局。由于框架的高度灵活性,它被广泛应用于各种响应式网络设计、网络应用程序和基本设备的应用程序。

13. Amaze UI -国产开源的HTML5 跨屏前端框架  


Amaze UI

是一款轻量级,高性能的CSS网格系统,是中国首个开源的HTML5 跨屏前端框架 ,它采用先进的 mobile first 理念 ,从小到大,对所有不同尺寸的屏幕进行适配。 Amaze UI包含了多个组件,提供几十个主题的 Widgets ,能极大提高开发的效率,此外,它还提供本地化支持,中文的排版效果相当不错。

本文的主要内容翻译自


标签:网络应用网格CSS3

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP