响应式网页布局研究
关键字：响应式；弹性布局；弹性媒体；媒体查询
Research of Responsive Web Page Layout
Abstract: Mobile Internet becomes a trend, the size of the gap is also increasing in the different Internet device, in the face of various equipment, all kinds of resolution, we can't design the website for each kind of equipment.If you want to get better visual effect, we need to responsive web design.In this paper, the response of the media query, flexible layout, the layout three implementation methods are discussed, such as elastic media for the web design provides a new solution.
Key word: Responsive; 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
响应式网页布局研究
引言
随着国内4G-LTE的兴起，网络的访问速度达到一个新的高度，移动互联网络飞速发展已经远远超出我们的预期。对于早期的手机端网站，通常做法是出PC端模板外再单独做一个Wap版本的手机端模板。这样做虽然可以在移动端很好的浏览，但是所付出的代价是要多一个地址去访问，还要为手机端设计一套专门的样式。随着Media Queries草案的发布也提出了一个基本的解决方案。
1.响应式设计概述
响应式布局又被称为流式设计、弹性布局、塑料布局、流体设计、自适应布局设备设计以及弹性设计[3]。
响应网页设计的作用是使网页在各种设备，各个不同尺寸的屏幕上自动适应。无论PC电脑和手机用户都可以更好的浏览网页。如图1所示。
图1 响应式网页布局示意图
响应式网页布局优点：
(1) 用户可以在不同的设备不同的浏览器具有相同的视觉体验。
(2) 一个响应式网页只有一个静态页面，这样你就可以保持相同的搜索引擎优化策略。
(3) 不必管理多个网页，从而可以减少一个网站的文护成本。
(4) 你可以保持在不同的设备上享有同样的来源链接。
(5) 可以更容易的收录相同的html和内容。
2.响应式网页设计组成部分
响应网页设计分为三个主要部分组成，包括弹性布局（flexible layouts），媒体查询（media queries），以及弹性媒体（flexible media）。
3.弹性布局
弹性布局是根据不同宽度屏幕能够动态做出调整的一种布局[2]。其中的重点在于栅格（flexible grids）。栅格是使用相对长度单位经行布局，最常用的就是用百分比或em来对width、height、margin、padding的值经行设置。当然也不仅仅只有这两种方法，在最新的CSS草案中加入了一些相对长度单位，比如vw, vh, vmin,vmax等。