内容摘要：随着现代社会的不断发展，人们的需求不断变化，不断的创新才能更好的满足人们的需求。从智能设备的出现，到如今不过短短十年，设备尺寸的多样化，传统的网页设计已不能满足现如今多样化的设备通用需求。如果仅为满足这多样化的设备需求，网站便会投入更多的人力资源，显然这是不切合实际的。为避免浪费这些不必要的资源，于是响应式设计的网站便顺势而生，出现在了人们的眼前，成为近几年网页设计的一大趋势，越来越多的网站选择了响应式。
对于近些年大热的响应式，我将利用HTML5和CSS3来写出一个响应式web页面，借鉴Bootstrap框架的网格系统实现web页面对不同显示设备的适配，使用JavaScript的库jQuery完成相关交互，能够在手机，平板电脑及PC设备上运行。
本文主要介绍什么是响应式，网页开发内容介绍以及在不同终端下的运行结果展示。
关键词：响应式 媒体查询 不同终端 用户体验 HTML5
目次
摘要
Abstract
引言--1
1.-响应式网页设计-2
1.1-响应式的设计原理-3
1.1.1-Viewport-3
1.1.2-媒体查询 (@media)-4
1.2-响应式的设计模式-6
1.2.1-基于显示设备的大小-6
1.2.2-内容显示方式优先-6
2.-网页开发内容介绍-8
2.1-开发准备-8
2.1.1-网页开发基本要素-8
2.1.2-网页开发工具-8
2.1.3-网页开发使用的库-8
2.2-网页布局-8
2.2.1-页面公用组件分析-9
2.2.2-首页布局分析-12
2.2.3-内页布局分析-13
3.-运行结果展示-14
3.1-PC端运行结果-14
3.2-平板端运行结果-15
3.3-移动端运行结果-16
4.-结语-17
参考文献--18
致谢--20
