响应式web设计模式的应用研究

《响应式web设计模式的应用研究》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、响应式Web设计模式的应用研究王柯柯重庆理工大学计算机科学与工程学院摘要：根据移动互联网的发展趋势，从响应式Web设计实践出发，说明了四种布局类型的特点，解析了响应式Web设计的流式布局、灵活图片和媒体查询等关键技术,最后，通过实例分析丫响应式Web设计的设计模式、设计流程及具体实现。关键词：响应式;Web设计;流体布局;设计模式;作者简介：王柯柯（1977-）,女，硕士，副教授，从事计算机软件、计算机实验教学管理研究。收稿曰期:2016-12-22ApplicationofresponseWebdesign

2、patternWANGKe—keSchoolofComputerScienceandEngineering，ChongqingUniversityofTechnology;Abstract：AccordingtothedevelopmenttrendofmobileInternet,thisarticlestartsfromtheresponseWebdesignpracticeandillustratesthecharacteristicsofthefourtypesoflayout,analysesthe

3、importanttechnologyofliquitlayout,flexibleimagesandmediaqueryoftheresponseWebdesign.Finally，thearticleanalyzesthedesignmodel,designprocessandrealizationoftheResponseWebDesignthroughtheexample.Keyword：response;Webdesign;liquitlayout;designpattern;Received：20

4、16-12-220引言Web是一个极不稳定的环境，不同的浏览器、不同的浏览设备每天都在不断涌现，造成了旧的设备和浏览器仍被人们使用的同时，若干新设备又被加入，但这些新的设备几个月后乂可能被淘汰，这就造成了混乱，而这混乱产生的同时也激发了若干创新和创造。因此，各种Web浏览器、Android手机、iPhone手机、kindle阅读器、Nook阅读器、iPad平板等。这些不同形式因素冲击着设计师，需要确保在不同平台的不同浏览器上都能创造出相同的用户体验，这就需要响应式布局技术(ResponseWebDesign,

5、简称RWD)来帮助实现。响皮式布局的提出者EthanMarcotte在其一篇文章中指出：“每当我谈论响应式设计的时候，我总希望强调一点，就是响应式设计不是‘为移动设备而设计’，它也不是‘为台式机而设计’，它是关于采用灵活的、设备无关的方法来为Web进行的设计m。”可见，设备无关的概念是关键，它要求所有的组件或布局都能与不同类型的设备和平台相兼容。1布局类型ZoeMickleyz在他的〈〈FlexibleWebDesign》一书中定义了四种布局类型：固定布局、可变布局、弹性布局和混合布局1.1固定布局固定布局意

6、味着页面宽度被指定为特定大小的像素，使用最广泛的是960px或1024px，它是Web布局中最为常见的实现方式，该布局给人一种对贞面有较多控制权的错觉，即使在不同的屏幕上显示，也看起来相当一致。固定布局的缺点在于，相对于浏览者的窗口而言，某些浏览者看到的设计不是过窄就是过宽，例如，如果页面设置宽度为960px,而用户浏览器宽度为880px,则用户只能看到页面内容的一部分，且会出现一个丑陋的滚动条。反之，则会出现大面积、未使用的空白区域。因此，严格的固定布局在今天广泛而多样的设备终端屮早已问题重重，需要更灵活的

7、布局技术来适应不同类型终端的显示需求。1.2可变布局可变布局中将度量单位由固定布局中的像素变成了百分比，此处的百分比即为内容所占视U(Viewpoint)的比例，该布局会基于视U的大小而更改宽度，这样就使页面具有了可变的特性。在可变布局屮，可以将页面根据不同的需求分为几部分，如分为三部分，则内容栏占视口宽度60%，边栏区占30%的，分割区占10%的。无论用户使用的是1024px宽的桌面浏览器还是768px宽的平板浏览器或其他，页面中元素的宽度会根据浏览器窗U的宽度自行调整，从而避免横向滚动条和大面积的空白区。

8、1.3弹性布局弹性布局和可变布局很相似，只是度量单位不同，弹性布局由可变布局屮的百分比变成了相对单位em，该布局的宽度基于用户浏览设备中设置的文本大小而自动更改。1.4混合布局混合布局则是根据用户不同的需求，需要结合上述两种或两种以上的布局方式才能实现的方法。若一个广告图片宽为300px,则此时可以将放置广告的边栏指定为固定的300px宽，其余列或区域则以百分比显示，这样，即可保证广告的宽度固定位3