大学城熙街网页响应式设计与开发

《大学城熙街网页响应式设计与开发》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、大学城熙街网页响应式设计与开发计算机与信息科学学院计算机科学与技术（师范）2011级徐昌焕指导教师戴政国摘要：本论文详细描述了一个基于Bootstrap技术的大学城熙街响应式网页设计与实现过程，结合HTML5、CSS3、JavaScript和jQuery等脚本语言，以及配合多种网页开发工具，制作出响应式网页。网页信息主要包括美食、购物、娱乐、游玩、酒店、出行。用户可以跨平台使用，网页会根据不同的设备来进行相应的布局。关键词：HTML5；CSS3；响应式网页；BootstrapAbstract：Thispaperdescribesaresponsivewebdesigna

2、ndrealizationprocessofcollegecityXijiestreetbasedonBootstraptechnology,combiningwithscriptinglanguagesasHTML5,CSS3,JavaScriptandjQueryaswellasvariouswebdevelopmenttoolstoproduceresponsiveweb.Itsinformationmainlyincludesgourmet,shopping,entertainment,playing,hotelandtraveling.Theuserscanc

3、rossplatform,andthewebcanmakerelatedlayoutaccordingtodifferentequipment.Keywords：HTML5;CSS3;Responsiveweb;Bootstrap引言随着信息技术的飞速发展，各种屏幕尺寸的智能设备纷纷涌现，更多的人喜欢使用手机上网，形成了台式电脑、笔记本电脑、平板电脑、手机上网的格局，这样要求网站具备在不同的客户端下能正常显示网页的能力，这种能力就是响应式网站的能力，根据不同通讯设备的屏幕分辨率选择不同的网页布局，达到正常显示网页的效果。目前仍然有许多网站不具备响应式功能，不能做到一个网

4、站可以在不同的通讯设备上正常显示，响应式网站可以解决这一问题，可以根据不同设备的屏幕尺寸进行自适应调整，实现了一个网站兼容多个终端的目标。总而言第12页（共12页）之，响应式网站的开发是未来的大趋势，做任何互联网项目都必须将响应式网站放在一个很重要的位置上。此次毕业设计想通过设计和实际制作一个响应式网页，达到学习和应用web知识和技能，开发和制作响应式网页，可以积累经验，为未来毕业后工作打下响应式网站开发的基础。1响应式网页实现的基本原理1.1响应式网页设计的定义响应式网页设计（RWD,ResponsiveWebDesign）这个术语，由伊桑·马科特（EthanMarc

5、otte）提出。他在AListApart发表了一篇开创性的文章，将三种已有的技术（弹性网格布局、弹性图片布局、媒体和媒体查询）整合起来，称之为响应式网页设计，响应式网页设计也可称为流式设计、流体设计、弹性布局、弹性设计、塑料布局、自适应布局、跨设备布局等[1]。1.2响应式网页设计的实现原理响应式网页设计的实现原理，其核心包括：通过MediaQuery侦测屏幕分辨率来输出不同的样式、流式布局和自适应的内容元素（如图片和媒体）。流式布局与媒体查询之间的完美组合构成了响应式设计的核心[2]。1.2.1MediaQueryMediaQuery是CSS3中加入的模块，使用CSS

6、3的媒体查询模块，我们可以针对不同的设备特性（如视口宽度）设置特定的CSS样式，使用CSS3可以检测视口宽度、屏幕宽度、设备处于横向还是纵向、视口的宽高比等等。媒体查询的代码如下。@mediascreenand(orientation:portrait)and(min-width:320px)and(max-width:768px){具体的样式}表示在纵向屏幕设备上最小宽度为320px，最大宽度为768px时加载大括号中第12页（共12页）写的样式。媒体查询的使用方式有两种：一种是直接在CSS文件中使用@media来判断屏幕的尺寸，另一种是在CSS中使用@import外

7、联需要加载的样式或者在HTML文档头部的link标签中通过媒体查询media判断屏幕尺寸来外联样式。对于媒体查询加载样式的使用，将不同媒体查询的样式保存在独立的文件中没有太大的好处，使用多个独立的CSS文件会增加用于页面渲染的HTTP请求数量，从而导致页面加载变慢，我们可以在同一个CSS文件中编写即可，从而优化页面的加载速度。1.2.2流式布局固定布局在响应式网页中已经不再适用。在响应式网页的实现原理中，一个重要的核心部分就是使用流式布局。它是一种百分比布局的思想，需要将固定PX像素单位改为百分比，修改文字的单位为相对单位，而不是固定的像