浅谈响应式网站论文

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

浅谈响应式网页设计

[摘要]经过十多年的快速发展，中国的互联网如今已经日趋成熟。随着3G, 4G的发展

和移动通信及WEB2. 0技术的提升以及近年来各种移动智能设备的兴起，移动互联网

也即将会步入高速发展时期，成为一种大势所趋。这一来就使中国互联网的发展变得

更加丰富、多元化趋势。越来越多的用户拥有多种移动设备，像智能手机、平板电脑、智能手表等，在现今的大环境下移动设备正在普及并且正在逐渐超过PC设备，面对市场上移动设备的不断增多，同时伴随着各种设备屏幕的分辨率、尺寸和型号的越来越多，如何能够在不同屏幕、不同系统平台等环境下保持网页的一致性，满足用户的一

致体验这将成为了整个网页设计行业的一个新挑战。

据非官方调查，移动设备正在逐渐超过PC设备，如果数据属实那么无可置疑，以后我们的网页设计就应该实现响应式布局。设想一个在移动终端都不能正常显示的网页能

给公司企业带来的大概也只有负面的影响，所以为了避免这种情况能够使所有利用移

动设备访问网站的用户都能有最优最好的体验，响应式设计绝对是最好的一种选择.

【关键词】:设备响应式设计;Web设计;移动终端;动态网页

一、晌应式网页设计《Responsive Web design)的理念

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是ipad，我们的页面都

应该能够自动切换分辨率、图片尺寸及相关脚本功能等.以适应不同设备;换句话说，页面应该有能力去自动响应用户的设备环魂。响应式网页设计就是一个网站能够兼容多

个终端，而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的

新设备做专门的版本设计和开发了。

其实这个是一个设计问题，既然是设计的问题，这里就会涉及到很多层面的角色，包括交互设计师，视觉设计师，前端工程师，后台开发工程师。交互设计师，要满足

各自不同分辨率和设备的页面布局展现方式。而视觉设计师，则要考虑到页面性能和

移动端带宽问肠，权衡下页面的酷炫效果和视觉色彩的运用。而前端和后台开发工程师，则要完成满足视觉需求和交互功能.更要考虑到页面加载性能和消耗带宽问题，更重要的是移动端安全性能方面!

二、响应式网页设计要素

Ethan Marcotte曾经在A List Apart发表过一篇文章“Re-sponsive Web Design"，

在第一次正式提出响应式设计概念时就定义了响应式设计的三大要紊:流体栅格、弹性图片、煤体查询。

传统网页是被固定的装在固定尺寸的盒子(栅格)里，无法随着外界环境而改变，而

响应式页面就像一袋水，可以成为不同形状，流体栅格就是按照百分比来设定容器的

宽度，宽度会随着浏览器变化而变化.当然，光容器流体也不行，内容也需成比例变化.所以页面上的内容:文字，图片等都可以设为弹性的。“流体栅格+弹性内容”让网页

具备了响应能力，媒介查询起的作用是定义响应规则。就像使用不同的容器来装水，

呈现的形状也将不同。媒介查询探侧浏览器宽度，并在指定宽度范围内加载不同的样式。网页显示状态如图2-1所示：

三、晌应式网页设计基本技术

响应式网页设计模式基于“移动第一’的原则而提出。主要使用如下基本

技:viewport meta”标签，可以在浏览器中禁止zoom;排版，根据设备大小自动剪裁，包括字体大小和垂直空间布局;大屏幕设备采用grid布局，小屏幕设备缺省使用单列;

针对特定代理做一定的设计折中。通过使用这样的技术策略，可以达到良好的网页屏

幕自适应效果，尽可能消除不同屏幕尺寸上用户体验的落差。

如果符合上面的设计，header看起来会是这样:

< head>

< meta charset=”UTF-8"/>

< title>

< meta name=“viewport" content=”width=device-width"/>

width:640px)” href=”grid.css”/>