响应式网页设计_如何实现响应式网页[通俗易懂]

大家好，欢迎来到IT知识分享网。

　　在原来的开发过程中，老师布置了一个安卓app的任务，但是当时因为基础而且又没有时间去学，所以我们选择了使用响应式技术。响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

　　说白了响应式就是一种相对布局，页面的布局可以随着屏幕大小的改变而改变，比如说当浏览器的窗口改变大小时，页面的布局也会随之变化。所以我们当时就是设计了一个网页，可以适应手机屏幕的大小，看起来跟安卓软件差不多，淘宝的app也是响应式网页与安卓控件相结合设计出来的。

　　响应式的技术手段是：一切弹性化，我们通过响应式的设计和开发思路让页面更加”弹性”了。图片的尺寸可以被自动调整，页面布局再不会被破坏。虽然永远没有最合适的解决方案，但它给了我们更多选择。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性；响应式图片，响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径”/rwd-router”。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的”响应式图片”，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。

　　十大开发框架：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的跨浏览器兼容性的框架，可在所有主流浏览器上运行；ureCSS，Pure是一组小的、响应式CSS模块，可用于任意Web项目中。它可作为每个网站或Web应用的起步工具，帮助开发者处理应用程序所需的所有CSS工作，同时不会让每个应用千篇一律；Responsablecss，Responsable使用最少的Sass，带给你最合适的响应式框架；TukTuk，TukTuk支持代码重用功能，提供更加快速、高效的样式列表，易于添加与维护；Kube，Kube是全球最为流行、最灵活的CSS框架之一。其带给你最强大的功能选择，极具创意性与美观性；Ivory，Ivory是一款强大、灵活、易用的响应式框架。 Ivory基于12列的响应式网格布局，包含表格，按钮，表格，分页，拨动开关，工具提示，手风琴，选项卡等网站中常用的组件和样式。