基于HTML5的响应式网站布局研究+源代码
毕业论文关键字：响应式；弹性布局；弹性媒体；媒体查询
Research of Responsive Web Design
Abstract: Mobile Internet becomes a trend, different Internet device the size of the gap is also increasing, in the face of various equipment, all kinds of resolution, we can't design a website for each kind of equipment.Want to get a better visual effect, we need to responsive web design.In this paper, the response of the media query, flexible layout, the layout are discussed, such as elastic media for the web design provides a new solution.
Key Words: Response type; flexible layouts; flexible media; media queries
目 录
摘 要 1
引言 1
1.响应式设计概述 1
2.响应式网页设计思路 2
3.弹性布局 2
4.媒体查询 4
4.1媒体查询概述 4
4.2建立媒体查询 4
4.3媒体查询的条件表达式 5
4.4断点 5
5.弹性媒体 6
5.1图片随着视口变化 6
5.2为特定图片指定特定规则 6
6.移动设备优先 6
7.响应式网页布局实例 7
8.总结 9
参考文献 10
致谢 11
基于HTML5的响应式网站布局研究
引言
随着移动互联网的迅猛发展，如何使制作出的网页在智能手机、平板电脑等移动终端更好的显示出来，成为Web前端关注的焦点。网络的访问速度达到一个新的高度，移动互联网络飞速发展已经远远超出我们的预期。对于早期的手机端网站，通常做法是出PC端模板外再单独做一个Wap版本的手机端模板。这样做虽然可以在移动端很好的浏览，但是所付出的代价是要多一个地址去访问，还要为手机端设计一套专门的样式。随着Media Queries草案的发布也提出了一个基本的解决方案。
1.响应式设计概述
响应式布局又被称为流式设计、弹性布局、塑料布局、流体设计、自适应布局设备设计以及弹性设计。
响应网页设计的作用是使网页在各种设备，各个不同尺寸的屏幕上自动适应。无论PC电脑和手机用户都可以更好的浏览网页。如图1所示。
图1 响应式网页布局示意图
响应式网页布局优点：
(1)用户可以在不同的设备不同的浏览器具有相同的视觉体验。
(2)一个响应式网页只有一个静态页面，这样你就可以保持相同的搜索引擎优化策略。
(3)不必管理多个网页，从而可以减少一个网站的文护成本。
(4)你可以保持在不同的设备上享有同样的来源链接。
(5)可以更容易的收录相同的html和内容。