网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

响应式 Web 设计必备的 12 款 CSS 框架

关注我吧
 2012/6/13 10:34:46 阅读次数:3304

目前接入互联网中的设备的多样性,催生了新的 Web 布局设计方式——响应式设计。响应式设计的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调 整。这样开发者就无需针对每种设备及分辨率分别创建独立的布局。

        本文整理 12 款针对响应式布局设计的 CSS 框架,可以使你的开发工作变得轻松,并节省你的时间和成本。

        1.   Skeleton

        Skeleton 是一系列 CSS 和 JS 文件的集合,它可以帮你快速地调整网页在不同分辨率下的显示效果,无论是 17 寸的笔记本电脑还是一个 iPhone。Skeleton 以轻量级的 960 网格系统为基础,可以优雅地等比例缩放桌面、平板、手机上的浏览尺寸。

响应式 Web 设计必备的 12 款 CSS 框架

        2.   Less Framework

        Less 框架是一个用于设计自适应网站的 CSS 网格系统,它包含 4 个布局和 3 套预设布局,这些都以一个单一网格为基础。Less 框架的目标是更高效地创建多布局网站,并在布局之间保持一致。

响应式 Web 设计必备的 12 款 CSS 框架

        3.   Foundation

        Foundation 是一个易用的、强大的、灵活的框架,用于创建运行于任何设备上的网站原型和最终产品代码。Foundation 包含几十种风格和元素,你可以快速将它们进行组合,然后通过布局和设计,形成最终产品。

响应式 Web 设计必备的 12 款 CSS 框架

        4.   The 1140 CSS Grid

        1140网格可以完美适应 1280 分辨率显示器。在较小的显示器上,它可以根据浏览器的宽度变成流体形式,并自适应浏览窗口。

响应式 Web 设计必备的 12 款 CSS 框架

        5.   Golden Grid System

        Golden 网格系统是为增强网页兼容性设计的折叠式网格,具有四个特征:列、跨页、底线、脚本。

响应式 Web 设计必备的 12 款 CSS 框架

        6.   Frameless Grid

        Frameless 和 Golden Grid System 类似,是通过逐列(column by column)形式来自适应页面布局,而不是通过逐像素(pixel by pixel)形式。Frameless 不是一个框架,因为它不包含任何代码,它只是一个特定类型的自适应网格的想法,你可以将它作为设计工作的一个很好的出发点。

响应式 Web 设计必备的 12 款 CSS 框架

        7.   MQFramework

        MQFramework 是一个响应式 CSS 框架,它使用@media 属性,允许你针对任何大小的浏览器设计你的网站。

响应式 Web 设计必备的 12 款 CSS 框架

        8.   InuitCSS

        该框架用于使用较少的代码实现在较小屏幕(平板电脑、手机)上运行的项目,支持 IE6+。

响应式 Web 设计必备的 12 款 CSS 框架

        9.   Fluid Baseline Grid

        Fluid Baseline 网格系统是一个 HTML5 & CSS3 开发工具包,为网站快速设计提供了坚实的基础。

响应式 Web 设计必备的 12 款 CSS 框架

        10.   HTML5 Boilerplate

        HTML5 Boilerplate 基于 HTML/CSS/JS 模板,可以帮助开发者使用 HTML5 技术快速开发稳健、功能齐全的网站。你可以把它当作自己的新项目模板,在此基础上建立自己的项目。

        该模板包含了帮助开发 HTML5 站点和应用程序的组件和一些优秀的最佳实践,只需开发者最少的前期工作,就能为项目提供一个非常稳固的基础。另外,该模板是高度可定制,可轻松删除不需要的一些特性。

响应式 Web 设计必备的 12 款 CSS 框架

        11.   320 and Up

        320 and Up 使用一个小型屏幕样式表,以防止移动设备加载桌面资源。其中样式表中包含了一些颜色、排版布局等设置属性。

响应式 Web 设计必备的 12 款 CSS 框架

        12.   Amazium

        Amazium 是一个基于 960 网格系统的响应式框架,使用 4 个主要的媒体查询来调整你的网站布局,以和设备屏幕相匹配。

响应式 Web 设计必备的 12 款 CSS 框架

        原文: popular css frameworks for modern web layout design


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭