资源描述：
《基于响应式布局的企业网站设计与实现课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、基于响应式布局的企业网站设计与实现随着移动智能设备的不断的发展,用户打开网络的途径也开始多样化,已经不仅仅局限在个人电脑对网页的浏览。移动终端上网的方式由早期的GPRS、WiFi、WiMAX一直到现在备受关注的3G、4G移动宽带信号。手机屏幕的尺寸以及分辨率也日益提高,同样平板电脑也逐渐走入广大用户的日常生活之中。多样化的屏幕大小以及网络访问方式与时俱进。而原有网页面在适应现有发展的时候显得举步维艰,为了适应这种趋势,WAP和APP也随之诞生,并广泛应用到IT当中。手机操作系统封闭性强,开发过程难度大耗时长，从iOS和Android这两个手机操作系统的发布
2、以后,就有了一个新名词:APP。但是APP的非通用性,开发的专业性,移植的复杂性,维护升级的繁琐,种种问题都随之而来。仅仅从现在市场环境来看,根据艾媒咨询(iiMediaResearch)中国智能手机市场季度监测报告中数据显示,2013年第一季度中国智能手机市场操作系统分布状况方面,Android、iOS、Symbian、WindowsPhone占比分别为71%、12.9%、10.2%、3.6%。还有2.3%为其他智能手机操作系统。由此可见,为了最大限度扩展用户群,满足不同用户需求,势必要对三种以上平台进行移植开发工作。背景信息现状技术介绍网站模块总结发展
3、趋势致谢为何要做响应式网站？做响应式网站的意义响应式网页技术是目前非常流行的一种网站前端开发技术，它能够随着用户使用的设备的大小调整网页的布局与结构，使不同的设备浏览页面更加流畅，灵活，满足用户的最佳体验。1.UIKituikit是一个轻量级、模块化的前端框架，可快速构建强大的web前端界面。它根据不同的屏幕分辨率与上网设备，会自动做出响应，提供一致的体验。2.Bootstrap由两个Twitter员工开发并开源的前端框架，目前已经更新到了v3.0版本，在Github上非常火爆，在国内也有很多粉丝，值得一试。3.AdobeEdgeInspect对移动开发者
4、尤其有用的工具，其前身是AdobeShadow，用于帮助设计师和开发者同时在多个移动设备上预览应用设计，发现和解决跨平台问题。4.ResponsiveWebDesignSketchSheets如果你还在用纸和笔来创建你的实体模型，你可以用这些现有的草图来设计你的交互网站了。5.Foundation号称是世界上最先进的响应式前端框架。6.SimpleGrid轻量级的响应式CSS网格系统，让你可以快速创建适应于手机和平板电脑的网站。响应式网页技术实现方式背景信息现状技术介绍网站模块总结发展趋势致谢背景信息现状技术介绍网站模块总结发展趋势致谢实现效果国内外研究现
5、状背景信息现状技术介绍网站模块总结发展趋势致谢国外自从2010，伊桑马科特提出响应式网页设计之后，就已经普遍应用到了很多网站上了，据我所知，例如很早在设计界比较流行的网站Pinterrest采用的就是响应式网站设计，类似的还有：Twitter，UIGStudio，Designzillas，Squarespace，MoreSleep，PrecisionismyInspiration等。背景信息现状技术介绍网站模块总结发展趋势致谢Twitter官网移动端国外研究现状背景信息现状技术介绍网站模块总结发展趋势致谢Twitter官网pc端Twitter官网移动端Tw
6、itter官网国内研究现状目前响应式网页设计在国外比较普遍，而在国内应用的比较少，究其原因主要有以下几点：（1）响应式网站比较新颖，不能被ie8以下浏览器兼容，而国内好多浏览器都是比较老的浏览器（2）这项技术还在发展当作，不一定适合于所有网站。（3）前期投入的时间和精力较多，后期测试复杂。目前国内采用这种技术的主要有：etao的首页（etao.com）和新浪的时尚频道首页（fashion.sina.com.cn）也完成了响应式改造。背景信息现状技术介绍网站模块总结发展趋势致谢图2-1新浪时尚pc端图2-2新浪时尚手机端新浪时尚频道背景信息现状技术介绍网站模
7、块总结发展趋势致谢技术介绍背景信息现状技术介绍网站模块总结发展趋势致谢背景信息现状技术介绍网站模块总结发展趋势致谢Bootstrap是来自Twitter设计师MarkOtto和JacobThornton在2011年发布的新型开源网站架构。初衷是为了解决Twitter网站前端开发中使用的库过于繁杂导致维护和升级困难,不仅在Twitter.com中广泛使用,并且公开发布后得到广泛的支持和应用。Bootstrap的核心是基于LESS框架构建的CSS。该架构具有12列的响应式栅格结构、丰富的组件、JavaScript插件、排版、表单控件,还有基于Web的定制工具等
8、特色。Bootstrap框架网格布局网格布局大型设备（>=1200
