响应式Web设计关键技术探究.docVIP

响应式Web设计关键技术探究 　　摘要：近年来，移动互联网得到大范围推广，响应式Web的设计的关键技术也得到完善，响应式Web的设计关键技术是移动互联网开发热点。主要是因为响应式Web设计整合了媒体查询（media queries）、弹性视觉媒体和流动布局（fluid grids），使得Web网页得到合理优化、视觉媒体能按照特定布局进行动态布局、流动布局能创建可缩放、可流动的弹性版式，这是Web技术的进步。笔者通过查阅相关文献和整理相关数据，展开对响应式 Web 设计概述及关键技术、响应式Web的开发流程、响应式Web的优势等展开分析，得出以下的结论 关键词：响应式Web；设计；关键技术 中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2017）05-0051-02 随着这几年，移动智能新品的推出，PC 互联网加速向移动端迁移和移动终端体验效果迥异，需要Web具有更强的兼容性，能够在用户的PC或者是智能客户端进行操作，响应式Web的设计的关键技术得到了重点开发，这关系到一个网页是否能够得到大众的认可，为大众提供良好的客户体验 据有关数据反映，国内Pc端网站的日均覆盖人数基本保持在 2.3 亿人次左右，移动端 App 的日均覆盖人数已接近 2 亿，并呈现持续上涨趋势，这些数据表明，移动互联网智能化已经来到，人们的工作和生活交流工具从PC客户端转移到移动智能端，传统的网页势必遭到淘汰 1 响应式 Web 设计概述及关键技术 1.1 ?应式 Web 设计概述 响应式Web技术在互联网开发的时候，因为其适用范围较少，没得到重视，但随着近几年来，智能产品开发，要求Web满足PC客户端和移动客户度，相关的Web设计者才开始重视响应式Web 设计 2010 年美国著名网站设计师伊桑Ethan Marcotte）在“A List Apart”发表题为“Responsive Web Design”的文章，提出了“响应式 Web 设计”（Responsive Web Design，简称RWD，也称“自适应网页设计”）的概念，指的是能智能识别屏幕宽度、并做出相应调整的网页设计。响应式Web的设计注重的是实现一个网站能兼容多个终端，通过媒体查询、弹性视觉媒体、流动布局的结合，实现兼容性网站创建，一个网站能够满足不同客户端用户需要。响应式Web设计能使客户端适应用户设备环境，智能化地适应大众的需要 1.2 响应式 Web 设计响应式 Web 设计 一个好的网站设计，主要能够根据用户端进行前台页面调整，利于形成良好的客户体验。响应式Web设计由媒体查询、弹性视觉媒体和流动布局三种核心技术构成 1）媒体查询 媒体查询是基于CSS33的一种新特性，主要应用于某种每天特征下的显示规则。RWD设计布局时，通过优先建立移动客户体验，利用媒体查询调整大屏幕，用移动端上设计原则能保证Web为不同类型的客户提供最佳的客户体验。目前，媒体查询支持 IE9、Firefox3.5、Safari3 以及它们的更高版本，同时支持大部分智能手机和其他基于屏幕的设备。这是科技发展的重大突破，得到很多的大众的支持 智能设备的流行，让Web设计者可以根据各自不同类型的设备属性，进行贴心设计，支持不同分辨率、屏幕尺寸、系统平台等设备环境。完美的完成响应式Web设计，实现PC电脑客户端、手机客户端、平板等设备查看网页无障碍。国内的Web设计通常是利用link标签和@media 规则来实现 2）弹性视觉媒体 网站的页面设置，随着电脑技术的进步，能够根据用户的习惯性进行操作，固定布局的页面宽度已经是过去式网页设置，现在智能机浏览页面，可以通过手指滑动进行屏幕调整，根据客户的需要进行智能化调整，不需要客户自己调整Web界面的缩放问题，是页面具有可变性。传统的网页主要采用的是“图片+文字”的形式构成网页，而响应式Web的设计可以插入gif图片、jpg图片等多种形式 3）流动布局 传统的网页界面随着科技的进步，人们淘汰了，目前响应式Web中主要是通过CSS 技巧，使图像和媒体比例限制在其父元素范围之内，相应于布局的其他部分按比例缩放，以适应其设备的大小。现在很多大的门户网站，实现手机客户端与PC客户端的换转，通过弹性图像和媒体，让设备完成分类 2 响应式Web的开发流程 响应式 Web 设计中的断点都依赖于 CSS3 的Media Queries 来决断，断点就是设备宽度的临界点 ， 也 就 是 Media Queries 中 的 min-width 和max-width 的值。目前国内的网页设计，主要偏向智能手机客户端，但智能设备、PC用户客户端也不能缺少，都需要开发者考虑在内。网页的