主流的web响应式前端框架总汇
source link: https://www.fly63.com/article/detial/11116
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
扫一扫分享
在以前网站通常都是为了电脑大屏幕展示而设计，如果用手机访问，只能在巴掌大的屏幕里看缩小版的页面。
随着移动互联网的到来，使用手机移动端的用户越来越多，所以适配移动端就很重要了，之前我们分别写2套代码来实现，这样导致开发工作量很大，页面之前内容也容易出现不同步的问题。
为了让用户在手机上看到更合适的布局，且兼顾开发的效率，响应式的概念就被提出了。通俗解释，就是通过一套代码，可以无缝匹配符合电脑、平板、手机预览效果的前端技术。比如下方 Nike 官网，就是应用了响应式设计后在不同客户端、分辨率下的效果。
虽然响应式的应用越来越广泛，但是从零开始去写一个响应式效果的网站对于程序员来讲是非常复杂的，因为当中包含了大量的逻辑、判断、适配内容。
所以，今天市面上看见的响应式网站，多数使用了一些开源的代码或者框架，下面“fly63前端网”就为大家整理一些最主流的前端响应式框架。
响应式web设计(Responsive Web design)的理念是： 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
Bootstrap
来自 Twitter，是目前最受欢迎的前端框架，Bootstrap 是基于 html、css、JAVASCRIPT 的，它简洁灵活，使得开发"Web响应式网站"更加快捷。它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。
安装 Bootstrap
通过 npm、Composer、或者 Meteor，可以将 Bootstrap 的 Sass 和 JavaScript 源码安装到本地。
npm install bootstrap如果你只是需要使用 Bootstrap 的预编译 CSS 或 JS 文件，你可以直接使用 jsDelivr 提供的免费 CDN 加速服务。
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">AmazeUI
Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。它含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。
相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。
安装AmazeUI
使用 Bower
bower install amazeui使用 Npm
npm install amazeui面向国外的用户可以使用 cdnjs 提供的 CDN 服务（支持 HTTPS），cdn地址：https://cdnjs.com/libraries/amazeui
<script src="https://cdnjs.cloudflare.com/ajax/libs/amazeui/2.7.2/js/amazeui.min.js"></script>Foundation
Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。它是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用，是一个以移动优先的流行框架。
它可以让你轻松设计出漂亮的响应式网站、应用程序和电子邮件，在任何设备上看起来都非常漂亮。Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。
安装Foundation
进入官网首页，点击“Download Foundation 6”的按钮进行下载，然后在项目中直接引入使用，官网截图如下：
Groundwork CSS
GroundworkCSS 是一个基于 Sass 预处理器的开源项目 ，主要用于快速构建响应式 Web 应用程序。拥有一个灵活的、可嵌套的网格系统，可以创建适应多种浏览设备的布局。 Groundwork 还提供多种 UI 组件，如导航、按钮、图标、表单、Tabs、对话框、工具提示等等。
安装Groundwork
进入官网，点击“Download ZIP”按钮进行下载，然后在项目进行引入：
<link type="text/css" rel="stylesheet" href="/css/groundwork.css">使用groundwork.all.js的前提需要先加载jquery
<script type="text/javascript" src="/js/libs/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/groundwork.all.js"></script>下面介绍些其它的响应式前端框架，由于目前市场使用量不是很多，就进行简单说明下，方便大家了解
MUELLER Grid System
基于Compass打造的MUELLER是一套模块化的网格系统，支持响应式或非响应式的布局，让你对列宽、基线网格和media queries拥有全面的控制权。
Cool Kitten
Cool Kitten框架是一套轻量级的HTML/CSS/JS工具集，涉及技术包括Normalize.css、Stellar.js和jQuery Easing插件，可以帮你创建具有时差滚动效果的响应式页面。
Profound Grid
使用SCSS构建的Profound Grid是一个弹性化(可以液态也可以固定宽度)的响应式网格系统，你可以根据需求添加预置媒体文件的布局结构(通过调整列的宽度或增减列)。与其他的网格系统不同，Profound Grid使用负边距(Negative Margins)来计算列，所以液态布局在任何浏览器当中看上去都能保持一致。
Centurion
利用SASS和CSS3 media queries构建，Centurion是一套非常易用的响应式Web框架。它的解决方案中提供了可以方便进行定制化的导航、表格、标签(使用CoffeeScript构建)等元素。即使是CSS样式表也是通过Sass创建的，使其能够在代码中的任何地方根据需求包含或排除特定的样式定义。
34 Responsive Grid System
34Grid基于“等量分布式纵列(equally distributed columns)”布局构建。与其他各类优秀的网格系统相比，34Grid能够为每一行内容都提供等量分布的纵列。它是完全可定制的，允许你根据自己的需求(最大纵列数量、纵列边距、行间距等)下载代码包。
One% CSS Grid
One% CSS Grid是一款基于百分比的12列液态CSS网格系统，专门针对想要快速构建响应式网页的用户而设计。你可以选择两种方式上手，一种适用于1280px宽的界面，另一种适用于1024px的规格。
RWD Grid
RWD Grid是一款基于流行的960.gs网格系统打造的响应式框架。它的命名规则与960.gs相仿；为了增加代码的可读性，所有的下划线都被替换为连字符。
Sassaparilla
Sassaparilla并非一套样板化和主题化的框架，它能通过SCSS和Compass来创建出可重用的弹性化样式表。
Base是一款12列的960px响应式CSS框架，它能提供你快速创建响应式Web项目所需要的一切。Base内置一套最小化的HTML5模板(包含jQuery)，一套基本样式表，一个默认的JS文件，一个用于定制样式表的LESS文件。
Bourbon Neat
Neat是一款基于Sass和Bourbon构建的语义化网格框架。它简洁而强大，可以帮你快速构建响应式布局结构。通过使用breakpoint() mixin，你可以为每种media query调整纵列的数量，并将这些设置存储在项目全局的变量当中。
Extra Strength Responsive Grids
Extra Strength可以创建适应性很强的基于百分比的液态响应式网格。对齐的方式很容易，你可以对网格进行嵌套，它的class命名方式也很容易记忆，并且适用SASS。
Blok Grid System
Block网格系统是一款移动优先的框架，可以帮助开发者充分控制页面在手机、平板和桌面设备上的表现。它基于12列的网格构建，你可以为每个div及断点选择不同的纵列数。
Gumby
Gumby是一款基于SASS构建的免费开源响应式框架。它的特色是随需随用，默认提供了960网格布局，其代码库中包含了Google Webfonts、Entypo图标、模块化的排版以及全定制化的UI工具集。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK