摘要： 响应式网页设计是移动用户网站设计的关键，基于弹性布局、响应式图片、媒体查询等设计理念，为解决门户网站适应各种不同分辨率的移动设备提供一种解决方案。
1 响应式网站建设设计
所谓的“响应式Web设计”，它是指在网站建设过程中，利用响应式Web设计技术构建设计网站，使网页内容在PC、平板电脑以及智能手机上能，根据用户交互行为以及设备系统、屏幕尺寸作相应的响应，并能正常的显示内容。
全面标准化管理与服务业从业人员素质提升相辅相成，通过实施与宣贯标准体系，进行团队整体培训和管理经验的积累，提高从业人员的职业道德、知识水平、服务技能。多渠道开展服务业管理人员和从业人员的标准化知识培训，鼓励高校及科研院所与企业的联合共建工作，在服务业示范点设置标准化创新研究基地，培养既有标准化理论功底又有丰富标准化工作经验的人才。
响应式Web设计首先应该遵循移动优先原则，交互设计应以移动端为主，由移动端扩展PC端，页面需要兼容不同终端。响应式Web设计我们应该考虑先针对移动终端小屏幕进行设计，然后针对PC机大屏幕进行设计。通过流式布局（Fluid Grids）创建流动的弹性布局界面，自适应图片（Scalable Images）调整页面的图片显示，利用媒介查询（Media Queries）技术选择样式，调整布局元素的范围，实现网页对不同终端设备的最优适配解决方案。
赫鲁晓夫外交政策的独特特征是开始重视亚非新兴国家，改变之前对中立主义的否认态度，承认不结盟的意义与合理性。[55]苏联对缅甸中立外交政策给以很高评价，特别是缅甸拒绝参加美国组织的东南亚条约组织。[56]斯大林时代的结束、苏联外交政策调整带来的连锁效应，很快在中苏两国与缅甸的关系上先后体现出来，同时这些调整和变化在缅甸国内也得到积极的响应。
2 响应式模块布局设计
按照“移动优先”的设计思想，首先利用DIV+CSS技术实现响应式整体布局，在设计网页过程中添加详细显示内容，最后阶段对页面进行装饰美化。在设计网页布局的过程中，先按规范设计2-3个固定宽度做为响应的模板，以宽度最窄的作为移动手机终端框架，再依次设计出中等、最宽的页面。网页根据屏幕大小，模块设计布局，采用单列布局、双列布局、三列布局显示，使用户在浏览时有较好的体验。如图1所示。
如南宋．梁楷《李白行吟图》画唐朝大诗人李白，未画任何背景，也不讲究人体比例，只在表现人物精神上下功夫，寥寥几笔，便意溢神足，使李白洒脱飘逸的形象跃然纸上。
3 响应式网页开发技术
3.1 流式布局
页面采用弹性设计来自动响应屏幕的变化和调整页面布局。采用CSS设置容器的浮动属性，来适应流式定位，自动适应宽度的变化。如当屏幕宽度不够，一行放不下多个区块时，就会浮动出现在下层，形成双栏布局。
图1
3.2 媒体查询
媒体查询是响应式设计的关键技术，利用media自动探测屏幕宽度，媒体查询的实现主要通过link标签和@media规则，根据查询条件加载相应的CSS样式局定位文件，从而达到为不同的终端设备自动调整页面的目的。如代码：
<link rel="stylesheet" type="text/css"media="screen and (min-width: 420px)and (maxdevice-width: 680px)"href="Screen2.css" />
对于浏览器不支持CSS媒体查询功能，如IE8及以下版本，可通过加载外部加载html5shiv和respond.min文件，支持CSS媒体查询。如代码：
3.3 弹性图片
基于“响应式图片”的思想，移动终端在浏览大图片时会消耗大量流量而影响网页面加载速度，响应式设计网页时可以考虑使用两种图片，通过javascript脚本来检测屏幕的分辨率，引用不同的CSS样式，调用不同分辨率的图片，如在PC上使用分辨率较大的图片，在移动终端上调用分辨率较少的图片。响应式网页还可以设置相对值，实现图片的自动缩放。
4 触屏交互设计
触摸屏的交互方式有相应设计规范，触屏设备对点击范围要求不同，如导航列表设计放在页面右侧或右下角，因为多数人习惯用左手把持设备，右手点击交互操作；手机操作多以滑动为主，滑动式操作让用户体验过程更加流畅。触摸屏的交互设计采用程序优化，利用虚拟键盘可以改变输入法布局，还能提供常用的命令，起到智能、辅助输入作用，增强用户体验效果。
5 动态元素设计
米维信息认为动态的元素比起静态的文字讯息更能吸引用户，移动终端视窗较小，用户不必从上到下滚动页面寻找信息。以Cinemagraphs取代GIF动态图加入，让观众可以更深入的参与网站，Cinemagraphs是静态照片中神奇的细微运动技术，是动态摄影和静态图片的结合，与GIF动画的不同在于它只包含一个动态元素。随着VR技术普遍，越来越多企业将虚拟现实技术、视频融入网站，丰富了信息，给观众更独特的体验。
