内容发布更新时间 : 2024/5/12 18:15:25星期一 下面是文章的全部内容请认真阅读。

1 引言

随着信息技术的飞速发展与互联网应用的日益普及，个性化网页的建立已经成为前端开发工程师思考的问题之一。而网页的布局结构，动态交互性，包括响应式等诸多元素都要遵循W3C规范，使用HTML5和CSS3技术实现网页结构和表现， JavaScript脚本语言实现了网页的交互性[1]。HTML5和CSS3的技术在现代网页技术中发展得非常迅猛，原因在于它提升了整个网页的渲染速度，加上网页切片技术的革命性突破，解决了美工设计和图片过多带来的响应慢的缺点[2]。并且CSS3样式在标准浏览器中渲染丰富，效果绚丽[3]。

2014年是响应式网站的元年，移动互联网用户数量已经超过了桌面用户。除了智能手机之外，使用平板电脑和电视机进行上网的用户也在持续增加。因此在互联网大规模的普及下，让网页尽量兼容各类通讯设备，适应各种分辨率的屏幕，并确保优良的用户体验，这是前端工程师必须要解决的问题。

响应式网页可以根据接收设备的不同分辨率自动调整网页布局，将同一网页的内容以不同的布局方式正常地在各种接收设备上显示[4]。

2 需求分析

从技术的角度来看，响应式网页主要考虑一下以下几个因素：根据手机屏幕小的特点要把台式机的版面裁切成手机版面，只显示最核心的内容。台式机屏幕分辨率大多数都是1920*1080px，而笔记本电脑的分辨率相对小一些，为了简化版面的布局，让大屏幕的台式机去兼容小屏幕的笔记本，所以台式机和笔记本电脑使用相同的布局。当屏幕宽度大于或等于1200px时与屏幕宽度为1366px下的网页布局一致。当屏幕宽度一般在640px到1200px之间时以屏幕宽度为1024px为标准对网页进行布局。而当屏幕宽度低于860px时，网页布局以720px为准展示。具体分析如图2-1所示。

2

屏幕宽度≥1200pxFALSETRUE1366版式≥860pxTRUE1024版式FALSE720版式图2-1 逻辑流程图

3 网页设计

3.1 网页展示内容

本毕业设计项目主要为了研究和实施响应式网页的理论和积累开发经验，所以本论文以响应式网页为核心，以展示旅游网页的内容为载体来检验响应式网页的功能。具体的网页结构图如图3-1所示。

图3-1 网页结构图

3

导航栏主内容底边栏完美旅行服务关于主页详情联系导航栏主内容底边栏导航栏主内容底边栏导航栏主内容底边栏导航栏主内容底边栏

3.2 制作线框原型

根据不同的设备屏幕尺寸，不同尺寸下弹性适应。设备样式如图3-2所示。

图3-2设备样式图

下面是响应式网页设计原理图如图3-3所示。

DOM树加载 If(width<860px)If(width>=1200px)@media query 图3-3 响应式原理图

720px布局1024px布局1366px布局If(width>=860px&&width<1200px)3.3 视觉设计

移动设备的屏幕像素密度与传统电脑屏幕是不一样的，因此在设计的时候需要保证视觉效果统一，视觉设计如图3-4所示。

4

图3-4 视觉设计图

3.4 前端构建

前端媒体查询（即响应式）核心代码如下所示。

@media only screen and (max-width: 1366px) and (min-width: 1200px) {

.wrap{width:90%;}

}

@media only screen and (max-width: 1199px) and (min-width: 860px) {

.wrap{width:90%;} }

@media only screen and (max-width: 859px) {

.content_top{display:none;} .wrap{width:95%;}

.top-nav ul li a{padding:40px 15px;} .grid{width:26.8%;} .span_2_of_3 {

width:94%;

5