响应式开发
1.什么是响应式开发
顾名思义,同一个网站兼容不同的大小的设备。如PC端、移动端(平板、横屏、竖排)的显示风格。描述响应式界面最著名的一句话就是“Content is like water”,翻译成中文便是“如果将屏幕看作容器,那么内容就像水一样”。
2.为什么要设计响应式开发
因为市面上出现了越来越多的智能移动设备,“主流设备”的概念正在消失,同一张图片在不同设备上看起来,大小可能天差地别。如果因此一个网页需要考虑到不同端的分辨率,用户的使用习惯。因此,响应式web设计的出现,其可用性被大大提高,无论是在哪个用户端,用户都可以按照自己的使用习惯浏览页面,减少使用时发生错误的几率,从而获得更好的用户体验。
3.响应式界面的四个层次
1、同一页面在不同大小和比例上看起来都应该是舒适的;
2、同一页面在不同分辨率上看起来都应该是合理的;
3、同一页面在不同操作方式(如鼠标和触屏)下,体验应该是统一的;
4、同一页面在不同类型的设备(手机、平板、电脑)上,交互方式应该是符合习惯的。
4.常用的响应式开发框架
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列的响应式网格布局,包含表格,按钮,表格,分页,拨动开关,工具提示,手风琴,选项卡等网站中常用的组件和样式。
5.响应式开发网页案例
MAshable主页
A Flexible Grid
Bootstrap中文网A Flexible Grid 案例
屏幕较大(PC,Mac)显示
屏幕较小(平板)显示
屏幕小(手机)显示