响应式网页设计(2.4)

在原来自己一直没太关注这块，也知道通过响应式网页设计可以很方便的设计一个同时兼顾PC桌面端和手机端浏览的网页，但是原来公司网站已经成型因此也没有着急将公司网站进行响应式页面设计后改版。而当前可以看到当我们再给客户或合作伙伴介绍公司产品和解决方案的时候，最佳的方式还是通过手机发送的链接直接访问的时候就能够看到公司产品和解决方案，而不是必须登录桌面端。

响应式网页设计概述

响应式网站设计于2010年5月由国外著名网页设计师Ethan Marcotte所提出。响应式网站设计(Responsive Web design)的理念是： 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

十大开发框架

响应式设计在2012年被提的比较多，但是响应式设计仍然在不断变化，不断创新。比如，新的设备不断出来(iPad Mini)，这让以前的设计想法土崩瓦解。而各种Web的响应式设计也获得了越来越多的注意，“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以Web设计也将迎来更多的响应式设计元素。

当然主流的十大开发框架如下：

Gumby Framework： Gumby 2是建立在Sass基础上的。Sass是一款非常强大的CSS 预处理器，允许用户自主快速的开发扩展Gumby，同时提供很多新的工具来自定义和扩展Gumby框架。Gumby 2是一个非常棒的响应式CSS框架。

Get UI Kit： Get UI Kit是一款轻量级、模块化的前端框架，可快速构建强大的web前端界面，而且，它是一款开源的前端UI界面的框架，可以无任何限制的使用UIKit 来创建自己的风格。

Foundation： Foundation是一个易用、强大而且灵活的框架，用于构建基于任何设备上的Web应用。提供多种Web上的UI 组件，如表单、按钮、 标签等。

Semantic： UI是Web的灵魂！Semantic是为工程师而制作的可复用的开源前端框架。提供各种UI组件，使得开发更加直观、易于理解。

52Framework： 52 Framework主要用于优化HTML5和CSS3的跨浏览器兼容性的框架，可在所有主流浏览器上运行。

PureCSS： Pure是一组小的、响应式CSS模块，可用于任意Web项目中。它可作为每个网站或Web应用的起步工具，帮助开发者处理应用程序所需的所有CSS工作，同时不会让每个应用千篇一律。

Responsablecss： Responsable使用最少的Sass，带给你最合适的响应式框架。

TukTuk： TukTuk支持代码重用功能，提供更加快速、高效的样式列表，易于添加与维护。

Kube： Kube是全球最为流行、最灵活的CSS框架之一。其带给你最强大的功能选择，极具创意性与美观性。

Ivory： Ivory是一款强大、灵活、易用的响应式框架。 Ivory基于12列的响应式网格布局，包含表格，按钮，表格，分页，拨动开关，工具提示，手风琴，选项卡等网站中常用的组件和样式。

Semantic-UI前端开发框架

Semantic UI—完全语义化的前端界面开发框架，跟 Bootstrap 和 Foundation 比起来，还是有些不同的，在功能特性上、布局设计上、用户体验上均存在很多差异。

文档和演示非常完善

易于学习和使用

配备网格布局

支持 Sass 和 LESS 动态样式语言

有一些非常实用的附加配置，例如inverted类。

对于社区贡献来说是比较开放的。

有一个非常好的按钮实现，情态动词，和进度条。

在许多功能上使用图标字体

英文官网： http://semantic-ui.com/

几款ReactJS最优秀的UI框架: https://cloud.tencent.com/developer/article/1388411

响应式网站设计  http://www.coolsite360.com/

响应式网站设计和实现思路： https://zhuanlan.zhihu.com/p/32690777

Html5响应式模板： http://sc.chinaz.com/tag_moban/xiangyingshi.html

https://zhuanlan.zhihu.com/p/25881672

对于公司网站设计，如果简单的话感觉并不需要使用到Semantic UI等，而仅仅采用Html5响应式页面模板，然后在模板的基础上进行修改即可。