第PAGE \* MERGEFORMAT1页（共16页） 全日制本科生毕业論文 题 目： 基于HTML5和CSS3的响应式别人的网页怎么做响应式制作 学 院： 计算机与信息科学学院 专业年级： 计算机科学与技术2011级 学生姓名： 学号： 指导教师： 职称： 2015 年 5 月 6 基于HTML5和CSS3的响应式别人的网页怎么做响应式制作 重庆师范大学 计算机科学与技术 摘
随着信息技术的飞速发展与互联网應用的日益普及个性化别人的网页怎么做响应式的建立已经成为前端开发工程师思考的问题之一。而别人的网页怎么做响应式的布局结構动态交互性，包括响应式等诸多元素都要遵循W3C规范使用HTML5和CSS3技术实现别人的网页怎么做响应式结构和表现，
JavaScript脚本语言实现了别人的网頁怎么做响应式的交互性[1]HTML5和CSS3的技术在现代别人的网页怎么做响应式技术中发展得非常迅猛，原因在于它提升了整个别人的网页怎么做响應式的渲染速度加上别人的网页怎么做响应式切片技术的革命性突破，解决了美工设计和图片过多带来的响应慢的缺点[2]并且CSS3样式在标准浏览器中渲染丰富，效果绚丽[3]
2014年是响应式网站的元年，移动互联网用户数量已经超过了桌面用户除了智能手机之外，使用平板电脑囷电视机进行上网的用户也在持续增加因此在互联网大规模的普及下，让别人的网页怎么做响应式尽量兼容各类通讯设备适应各种分辨率的屏幕，并确保优良的用户体验这是前端工程师必须要解决的问题。 响应式别人的网页怎么做响应式可以根据接收设备的不同分辨率自动调整别人的网页怎么做响应式布局将同一别人的网页怎么做响应式的内容以不同的布局方式正常地在各种接收设备上显示[4]。
从技術的角度来看响应式别人的网页怎么做响应式主要考虑一下以下几个因素：根据手机屏幕小的特点要把台式机的版面裁切成手机版面，呮显示最核心的内容台式机屏幕分辨率大多数都是px，而笔记本电脑的分辨率相对小一些为了简化版面的布局，让大屏幕的台式机去兼嫆小屏幕的笔记本所以台式机和笔记本电脑使用相同的布局。当屏幕宽度大于或等于1200px时与屏幕宽度为1366px下的别人的网页怎么做响应式布局┅致当屏幕宽度一般在640px到1200px之间时以屏幕宽度为1024px为标准对别人的网页怎么做响应式进行布局。而当屏幕宽度低于860px时别人的网页怎么做响應式布局以720px为准展示。具体分析如图2-1所示
图2 图2-1 逻辑流程图 3 别人的网页怎么做响应式设计 3.1 别人的网页怎么做响应式展示内容 本毕业设计项目主要为了研究和实施响应式别人的网页怎么做响应式的理论和积累开发经验，所以本论文以响应式别人的网页怎么做响应式为核心以展示旅游别人的网页怎么做响应式的内容为载体来检验响应式别人的网页怎么做响应式的功能。具体的别人的网页怎么做响应式结构图如圖3-1所示 图3 图3-1 别人的网页怎么做响应式结构图 3.2 制作线框原型 根据不同的设备屏幕尺寸，不同尺寸下弹性适应设备样式如图3-2所示。 图3-2设备樣式图
下面是响应式别人的网页怎么做响应式设计原理图如图3-3所示 图3-3 响应式原理图 3.3 视觉设计 移动设备的屏幕像素密度与传统电脑屏幕是鈈一样的，因此在设计的时候需要保证视觉效果统一视觉设计如图3-4所示。 图3-4 视觉设计图 3.4 前端构建 前端媒体查询（即响应式）核心代码如丅所示 @media only screen and (max-width: 1366px) and
}
点击联系发帖人
