当今，移动互联网迅猛成长，各类智能装备层出不穷。传统网页计划回收“牢靠页面及元素宽度，任何终端同一页面结果”的计策，无疑将造成网页在一些新兴移动终端上表现的笔墨极小、链接漫衍极密，用户必要在屏幕上埠眯蕾纵来自主寻求较好的体验。面临这一破绽，网页计划师聚焦于“相应式网页计划”这一要害词，试图行使一套代码为种种终端装备提供差异的计划和体验。从先前“为牢靠装备计划网页”超过到“相应式网页计划”是一个较难的进程。一些新手也许已经积攒了诸如媒体查询、流式机关、弹性图片等零星的计划开拓能力，把握了HTML5和CSS3的行使要领，但他们依然无法驾御相应式网页计划。造成这种环境的直接缘故起因就在于缺乏一个可以或许指导他们当即开展相应式网页计划实践的可操纵流程，即原型。
1两个要害观念：相应式网页计划与原型
相应式网页计划（RWD，Responsive网页Design）是一种网页前端开拓技能，它可以描写为，“分身多种差异装备屏幕尺寸、判别率、体系平台和举动做出响应的调解和机关的表现机制”。原型（Prototype），也叫“原样”，是“模仿科学”中的一个术语。在生理科学中，因为很难对举措或心智勾当熟悉清晰，以是一样平常相沿J•R•安德森的概念，把原型（Prototype）视为关于领域的最典范的样例假想，即把“原型”视为外化的实践模式，或“物质化”了的心智勾当方法或操纵勾当措施。综合上述，相应式网页计划原型可描写为：切合“相应式网页计划项目说明、种种终端具有得当自身用户体验的差异页面结果、一套代码完成全部差异终端的网页建造、种种终端与主流赏识器精采兼容”等一系列法则的，外化的相应式网页计划勾当实践模式。
2建构相应式网页计划的原型
建构原型一样平常回收生理模仿法，它包括三个步调：
（1）相应式网页计划勾当的成果说明；
（2）相应式网页计划勾当的布局说明；
（3）成果说明与布局说明的有机团结。个中，成果说明的重点是浸染的工具，前提与功效；布局说明的重点在于构成要素及要素之间的相关。相应式网页计划的方针是可以或许高效的编写一套代码为种种终端装备提供精采的计划结果和行使体验，这必要具备HTML5、CSS3、Javascript和jquery的根基手艺。相应式网页计划之父——伊桑.马科特以为，相应式网页计划应该起首针对小屏幕举办计划，然后慢慢加强针对大屏幕计划。这种思绪倾覆了传统牢靠宽度的网页计划要领，对付那些已经积攒了零星的相应式网页计划开拓能力、HTML5及CSS3等技能，可以或许较纯熟的完成牢靠宽度桌面端网页的新手而言，生怕很难领略从小屏幕开始计划然后渐进加强的思绪。思量到新手已经风俗计划建造牢靠宽度的桌面版网页，相应式网页计划假如从牢靠宽度的大屏幕网页建造开始，然后改革这套代码将仅合用于桌面的网页依次兼容平板端和手机端也是一个不错的思绪。相应式网页计划勾当包括了“项目说明”、“网页平面计划”、“桌面版网页建造”、“平面版的改革”、“手机版的改革”及“兼容题目的调试”这6个典范的子勾当。这些典范要素的相关可以描写为，“要想高效的完成某相应式网页计划项目，起首必要项目说明，其阶段性功效是相应式网页的总体方案，即在用户群体需求说明及主题解读的基本上，举办色彩说明及定位，确定UI版面机关，说明计划网页成果模块，确定网页气魄威风凛凛等，最终形成包括“媒介”、“需求说明”、“体系说明”、“气魄威风凛凛计划”、“种种终端UI版面起源机关”、“色彩定位”、“网页建树日程筹划”等部门的网页总体方案文档；然后，按照前期方案中“色彩”、“气魄威风凛凛”及“种种终端UI版面机关”等的说明，依据页面计划原则，操作photoshop绘制合用于种种终端表现的平面结果图；随后，操作“HTML5+Css3”技能回收<div>+css机关完成牢靠宽度桌面版网页的建造并天生网页文件和样式表文件；接着，在这套代码的基本上，操作媒体查询技能、流式机关、弹性图片技能，团结平板终端的页面结果图将代码改革成兼容桌面及平板的网页；之后，在上述修改的基本上，继承操作媒体查询技能和弹性图片技能，团结手机终端的页面结果图将代码改革成兼容桌面、平板、手机的网页；最后，操作火狐和IETester软件查察起源完成的相应式网页，办理跨赏识器的兼容题目，形成完备网站。该进程中任何环节假如呈现欠稳当都应该返回上个步调举办从头修改。团结上述对网页计划勾当的成果与布局说明，不难发明，相应式Web计划勾当原型中的6个典范子勾当庞洪水平差异。个中“桌面版网页建造”、“平面版的改革”、“手机版的改革”及“兼容题目的调试”这4个典范子勾当是较量伟大的，包括了许多熟手的要害技能，必要进一步叙述。
3熟手的要害技能
从上述合用于新手的相应式网页计划勾当根基原型发明，建造一个可以或许兼容主流赏识器的牢靠宽度桌面版网页是相应式网页建造的初步。那么，起首在“桌面版网页建造”这个环节中提取一些熟手要害技能，作为给以新手的能力提醒。
3.1兼容主流赏识器的桌面版网页建造技能
为了防备差异赏识器给以沟通HTML5标签的初始样式存在差别，熟手操作HTML5+CSS3建造桌面版网页建造时，一样平常会在样式文件（扩展名.css）中给出如下初始化代码：*{margin：0px;padding:0px;}body{margin:0px;padding:0px;text-align:center;font-family:"宋体";font-size:16px;color:#cccccc;}ul,li,a{margin:0px;padding:0px;list-style:none;}div{overflow:hidden;float:left;}#wrapper{width:1007px;height:auto;margin-left:auto;margin-right:auto;overflow:hidden;clear:both;}这部门代码块可以实现页面在IE内核和Firefox内核的全部版本赏识器中居中对齐，外层机关盒子与赏识器头部无缝紧贴；<div>及css3完成牢靠宽度机关时，默认全部内部机关<div>向左浮动，溢出属性为潜匿；全部组成页面的HTML5元素的默认边距和添补属性为0px；HTML5的列表标签默认项目的记为空，边距和添补为0px。另外，确定页面尺寸,今朝大大都表现器为1024像素*768像素，那么以此为默认表现器时，页面的宽度尺寸一样平常配置为“1007像素”。初始化CSS代码后，接下来就是操作<div>+CSS完成机关，这里提醒新手：完成机关后，务必在IETESTER和Firefox中搜查网页机关是否可以或许兼容主流赏识器。然后，按照桌面版网页平面计划结果图完成页面的建造。另外，熟手的履历是建造进程中频仍检测桌面版网页是否可以或许美满兼容各类赏识器。
3.2操作流式机关、弹性图片、媒体查询技能修改桌面版网页
（1）相对视口尺寸，将最外层的机关<div>（譬喻：#wrapper{width:1007px;...}）的宽度配置为96%（这个值取决于当前页面的视觉结果，也可以给其他数值）；然后，将最外层的机关<div>内部的页头机关<div>、导航机关<div>、内容机关<div>、侧边栏机关<div>、页脚机关<div>对应的CSS样式中的width属性值操作公式——方针元素宽度÷上下文元素宽度=百分比宽度把网页的牢靠机关修改成百分比机关，也就是将牢靠像素宽度转换成对应的百分比宽度。
（2）将页面中全部HTML5标签元素对应的CSS样式表中的margin-right、margin-left、padding-right、padding-left的属性值也用公式——方针元素宽度÷上下文元素宽度=百分比宽度来修改。
（3）将CSS样式表中的font-size属性值的单元用em来取代px。这里依然行使公式——方针元素宽度÷上下文元素宽度=百分比宽度。这里必要提醒新手的是：在<body>标签的初始化代码中，假若有font-size:16px；语句，那么在给其他元素的font-size属性上修改值时，公式中的“上下文元素宽度”就便是16px，譬喻，#logo{font-size:48px；}此刻要修改为#logo{font-size:3em；}。
（4）为了实现弹性图片，让图片随视口缩放，图形图像、动画和视频的弹性配置行使“img,object,video,embed{width:100%;max-width:100%;}”。个中，max-width属性是用于确保缩放时不会超出图片最大尺寸。同时，熟手还会行使AdaptiveImages办理方案来实现自顺应图片。
（5）媒体查询可以通过判定差异装备终端，提供差异的样式使着实此刻差异终端都能得到最佳的用户体验。譬喻，某个相应式页面用电脑赏识页面时，页面信息会以平铺的情势漫衍在页面吻合的位置；用手机赏识页面时，导航按钮会相继潜匿起来，部门信息酿成阁下滑动的方法泛起，页面会从头机关，图片响应缩小。前言查询的语法名目是，譬喻：设定宽度不高出400像素的屏幕尺寸，代码是：<linkhref="css/phone.css"rel="stylesheet"type="text/css"media="onlyscreenand(max-width:400px)">。固然，HTML5+CSS3提供了精采的媒体查询成果，但当前仍有一些赏识器不支持，你也许必要添加如下根基样式：<!--[ifltIE9&!IEMobile]><linkhref="iestyles.css"rel="stylesheet"type="text/css"><![endif]-->3.3差异种类、差异版本赏识器的兼容题目办理超过赏识器的题目一向是相应式网页计划的困难。熟手面临这一题目时，一样平常回收“渐进加强与降级”、“操作javascript修复老版本IE”、“行使Modernizr帮助批改样式，按需加载资源”、“给IE6，7，8追加媒体查询成果”等要领。
4竣事语
对相应式网页计划而言，当前的计划理念和技能要领还不是终点,网站前端计划师必要继承全力找出更好的办理方案。而对新手进修者而言，相应式网页计划开拓手艺的形成不是一挥而就的，还必要进修者在多个项目中，操作原型举办多次定向、操纵及内化才气真正把握。
作者：秦书荣 李新
