响应式布局应用技术研究

响应式布局应用技术研究

【摘要】基于响应式布局实现的网页能够根据浏览终端的不同以及同一终端分辨率的不同自适应显示相应不同的网页效果，消除浏览终端，包括PC机、智能手机及平板电脑等对网页展示效果的影响，所以已经成为信息时代应用的主流。本文在研究时，主要从媒体查询、有条件加载以及流式布局等技术角度分析响应式布局实现。

【关键词】响应式；媒介查询；流式布局；自适应

信息技术的快速发展及应用，导致越来越多的终端用户不再拘泥于使用PC 机浏览访问网页，而是逐渐往智能手机、平板电脑方向发展，由于这些终端屏幕大小不一、分辨率也各不相同，如果浏览网页不能自适应，会给开发及维护带来极大不便，而通过响应式布局，可以很好解决这一问题，所以针对响应式布局的研究拥有十分重要的现实意义。

1 响应式布局概述

响应式布局是指通过特定技术实现能够兼容多个不同终端的网页，而非单一终端设备的固定版本，实现网页的自适应性，进而为网页浏览用户提供更舒适的界面浏览体验。

2 关键技术

（1）媒介查询技术

媒介查询技术是基于CSS3规则实现，通过对智能终端设备的分析，让CSS 样式更精确的作用于不同媒体资源或同一媒体资源的不同条件，丰富界面展示效果。

@media screen and（max-width：600px）{

body{

font-size：86%；

}

#content-main{

float：none；

width：100%；

}

}

（2）有条件加载技术

在移动终端设备访问网页时，为确保访问效率及质量，只加载用户浏览访问部分的媒介资源，而暂停加载不必要的内容，包括社交工具、图片等。

3响应式实现

（1）流式布局实现

流式布局在实现时，将网页内容宽度全部由固定值定义转化为百分比宽度值，并设置CSS浮动属性，确保在终端浏览设备屏幕大小发生变化时，可以自浮动显示网页效果，避免了内容被隐藏。

（2）自适应文字及图片

在终端设备屏幕大小发生变化时，网页文字及图片也同步缩放变更，为网页效果展示提供支撑。其中，在文字处理时，使用相对大小单位em替代像素px，实现文字根据父级元素自适应；在图片处理时，通过JS脚本检测屏幕分辨率，并通过检测结果发送虚拟请求，在服务器端处置返回图片效果。

4.响应式WEB优化

（1）代码压缩。使用Compass压缩加载CSS资源，使用UglifyJs压缩加载JS资源，减少HTTP请求次数，提升资源加载效率，降低用户等待DOM加载时间。

（2）图片及文本优化。图片及文本资源在显示时，会占用大量kb，影响界面展示性能，通过Adaptive Images内嵌缓存及FitText修复方式实现图片高效加载。

（3）页面性能评估优化。使用Mobitest工具对界面性能执行评估分析，发现不足，弥补不足。

5 总结

智能终端的多样化发展，给网站设计、维护带来了极大的困难，而通过响应式布局的网站可以很好的解决这一问题，并为用户提供更好的浏览服务，所以基于响应式布局的网站设计已经成为主流。

参考文献：

[1]蒋凌燕，查英华.基于HTML5的响应式Web页面重组适配技术研究[J].计算机与现代化.2015（02）.

[2]赵梦琪.浅谈“扁平化设计”在交互设计中的应用[J].设计.2014（03）.

[3]王愉，潘明明.响应式网页设计初探[J].北京印刷学院学报.2014（03）.

[4]戴慧萍.响应式设计对网页界面的影响[J].艺术教育.2015（01）.