极佳的响应式框架

最新推荐文章于 2024-05-04 15:47:11 发布

chase_sky

最新推荐文章于 2024-05-04 15:47:11 发布

阅读量704

点赞数

分类专栏：前端工具文章标签： web前端前端工具

本文链接：https://blog.csdn.net/chase_sky/article/details/73890342

版权

前端工具专栏收录该内容

5 篇文章 0 订阅

订阅专栏

随着移动互联网的兴起，移动应用遍地开花。对于传统的网站而言，已经无法适应移动设置。如手机，平板等。不过随着HTML5标准的尘埃落定，响应式框架如雨后春笋般出现。下面就给大家介绍一些比较优秀的响应式框架。

Bootstrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

为所有开发者、所有应用场景而设计：Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

Bootstrap的强大这这处在于它给我们提供了非常多的，极其实用的样式，组件，JavaScript插件。还有一个更多接地气的就是他有一个中文的官网。语言不再是你的障碍。

中文官网：http://www.bootcss.com/

英文官网：http://getbootstrap.com/

Kube

Kube框架是目前世界上最先进，最灵活的框架之一。
Kube事半功倍，有更多的时间去创造激动人心的产品。
与Bootstrap相似，Kube也提供了一些常用的css组件，JavaScript工具。

官方网站：http://imperavi.com/kube/

UIKIT

UIkit 基于 LESS 开发，代码结构清晰简单，易于扩展和维护。
体积小、反应灵敏的响应式组件，使用一致的、无冲突的命名规则。
可根据 UIKit 基本的风格及样式，轻松地自定义创建出自己喜欢的主题样式。
根据不同的屏幕分辨率与上网设备，UIKit 会自动做出响应，提供一致的体验。
一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。
UIKit为您提供了全面的HTML、CSS及JS组件，它们使用简单，容易定制和扩展。

相对于Bootstrap来说它的优势就是效果会多一些，炫一些。不过UIKit里面的实现插件比Bootstrap多。总的来说他们两个之间各有优势。

中文网：http://www.getuikit.net/

英文网：http://getuikit.com/

amazeui

为移动而生：Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。
组件丰富，模块化：Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。
本地化支持：相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。
轻量级，高性能：Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。

官方网站：http://amazeui.org/

amazeui 还提供了一个 Amaze UI Touch 这个框架就类似于APP 的效果了。这个框架基于 React.js 的移动端 Web 组件库

专属于移动：Amaze UI Touch 专为移动打造，在技术实现、交互设计上只考虑主流移动设备，保证代码轻、性能高。
专注于 UI：只提供 UI 组件（View），对配套技术不做限定，方便用户与现有技术栈快速整合，降低使用成本。
采用 Flexbox 布局：使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局。
基于 React.js：基于风靡社区的 React.js 封装组件，沿袭高性能、可复用、易扩展、一处学习多端编写特性。

官方网站：http://t.amazeui.org/

Foundation

极速的响应式设计：Foundation 是一个易用、强大而且灵活的响应式前端框架，用于构建基于任何设备上的响应式网站、 Web应用和电子邮件。结构语义化、移动设备优先、完全可定制。
响应式网站：Foundation 可以帮助你快速创建响应式网站，它为你提供了大量的HTML、CSS和JavaScript组件和功能;你也可以针对不同项目定制扩展功能。
电子邮件：电子邮件框架可以接入任何第三方邮件平台，可以帮助你更加快速的创建收发邮件模板项目。
Web应用：Foundation Web应用可以快速、简单的构建复杂的布局、交互动画。通过响应式Flexbox的布局，使你的项目可以运行到任何设备和浏览器上。
语义化：使用Foundation框架语义化结构，可以编写更干净、更优雅的前端代码
移动设备优先：通过同一份代码快速、有效适配手机、平板、PC 设备
可定制的：你可以根据自己项目情况完全自定义定制（定义栅格、颜色、字体大小等）
专业化：成千上万的设计师和开发人员在使得Foundation,我们专业化的团队帮助你快速解决出现的问题。

官方网站：http://foundation.zurb.com/

Pure

Pure.CSS 占用极小的空间和带宽。

Pure小的没有节操，全部模块gzip压缩后才 4.4KB* 。考虑到移动端，保持文件尽量小对我们来说非常重要，每一行CSS都经过深思。如果你只用部分模块，简直小的忽略。

* 上面标示的是每个模块独立的大小，多个模块合并后进行压缩文件会更小。

Pure基石：Pure基于Normalize.css添加了HTML元素的布局和样式，以及常用的UI组件。全是精华，木有糟粕。

移动端是初衷：Pure是响应式的盒子模型，适应所有尺寸的屏幕。通过皮肤生成器可以自定义样式。

写出你自己的样式：Pure提供最基础的样式，鼓励你基于此写出自己的样式。它被设计为容易覆写，且不影响你自己的样式。

中文网：http://www.purecss.org/

英文网：http://purecss.io/

framework7

Framework7 是一个开源免费的框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。

Framework7 最主要的功能是可以使用HTML、CSS和JS来开发iOS7应用。Framework7 是完全免费开源的。

Framework7 并不能兼容所有的设备。她只专注于为 iOS 和 Google Material 设计提供最好的体验。

如果你想开发 iOS 或者 Android 混合应用（Phonegap）或者你想开发 iOS 和 Google Material 风格的WEB APP，那么Framework7将会是你的首选。