响应式网页设计策略探讨

前言：想要写出一篇引人入胜的文章？我们特意为您整理了响应式网页设计策略探讨范文，希望能给你带来灵感和参考，敬请阅读。

【摘要】随着移动互联网的不断完善和智能终端设备的普及，智能手机和平板电脑逐渐成为主流上网工具。媒体设备的多样性使得传统PC端网页无法为移动端用户提供良好的用户体验。本文分析了移动传播的优势，研究了响应式网页的内涵和主流技术，并对响应式网页设计策略进行了详细分析。

【关键词】响应式网页；移动优先策略；媒体查询；流式布局

1引言

互联网的迅速、便捷、高普及性使之成为各行各业进行宣传营销的主要手段。随着移动互联网的不断完善和智能终端设备的普及，移动设备正被人们越来越广泛地应用，并成为访问互联网的主流终端设备。移动传播具有携带方便、时空自由、响应即时等优势，为企业宣传与营销、文化传承与保护注入新的活力。传统的PC端网页无法为移动端用户提供良好的用户体验。能自适应不同分辨率的电脑、平板和手机等设备，给多种用户带来更好的视觉体验的网页，更有利于扩展传播范围、拓宽营销渠道，响应式网页应运而生。

2响应式网页的内涵

响应式网页秉承“一次设计，普遍适用”原则，即一个网站能够兼容多个终端。网页的内容和布局根据用户行为（缩放浏览器、切换移动端设备横屏与竖屏）以及终端设备屏幕的尺寸、分辨率等，进行相应的响应和调整。用户使用各种品牌和版本的手机、各种分辨率的电脑还是iPad打开网页时，网页的界面都能够展示合适的布局、图片尺寸、显示内容等，提供最优化的显示效果[1]。这种能够自适应各种屏幕分辨率，自动转换网页界面布局和内容呈现的网页叫做响应式网页。

3响应式网页主流技术

媒体查询是响应式网页开发的核心技术。从手机到平板电脑再到电脑，终端设备分辨率的种类不胜枚举。使用@media查询，可以检测设备的实际宽度、手持方向、媒体特性等属性，对不同媒体属性的设备定义不同的CSS样式。不同种类的终端加载网页时或重置浏览器大小的过程中，页面会根据媒体类型或浏览器的宽度，加载不同的CSS样式，重新渲染页面，显示不同的内容和布局效果。流式布局是响应式设计的一种常规布局思想，它以百分比为单位。页面元素能够在分辨率或浏览器宽度发生变化时，平滑缩放，避免给用户带来视觉上的跳跃感；同时避免出现传统固定布局中的横向滚动条。流式布局也存在一些缺陷，当屏幕在较小和较大尺寸之间变化时，同样的布局设计不能提供良好的视觉体验。如一些文字的行宽在电脑端显示时，符合用户的视觉效果，但是在手机端就会显得太窄，影响用户浏览。百分比为单位的元素大小以其父元素宽度为参照物，元素嵌套层数较多时，计算机比较麻烦。流动布局还需结合媒体查询的方法，针对不同分辨率的设备来优化网页样式的响应式策略，这样才能达到更好的效果。弹性布局主要使用em和rem作为元素单位，rem以HTML根元素大小为参照物进行计算，解决了百分比计算上的缺陷，使网页设计更加便捷高效。单纯的rem不能实现响应式布局，还需要结合javascript或媒体查询技术来实现。同时，rem作为字体大小单位，结合媒体查询技术可以方便地控制不同设备上文字的字号。弹性图片技术可以实现图片随着屏幕大小的变化进行平滑过渡，适配缩放，实现响应式变化。同时，准备大分辨率和小分辨率两种图像设计方案，结合媒体查询技术，在大分辨率设备上使用大分辨率图像，在小分辨率设备上使用小分辨率图像，即大屏加载大图，小屏加载小图。便于提高网页加载速度，节省存储空间[2]。Bootstrap框架是一个用于前端开发的开源工具包，是当前响应式Web设计最流行、最常用的框架。它基于HTML5、CSS3、jQuery和JavaScrip技术，为开发者提供了多种响应式的组件，将一整套CSS样式和特效代码封装在不同的文件中，方便用户使用。

4响应式网页的设计策略

在进行页面布局设计时，媒体查询有两种方案。一是使用max-width，从大屏幕（桌面端）开始向下的设计方案，二是使用min-width，从小屏幕（移动端）开始向上的设计方案。第二种方案是移动优先（Mobile-First）的设计策略，即优先针对移动设备进行内容和布局设计，再逐渐添加内容，增强大屏幕的视觉效果，适应分辨率更大的设备。移动优先策略可以减少很多不必要的CSS代码，有利于提高响应式网页的开发效率，更好的满足用户需求。响应式网页一般使用媒体查询技术，设置小屏、中屏、大屏三种布局方案。运用移动优先策略，首先设计小屏幕三字型布局。小屏幕的显示空间有限，在进行设计时要去粗取精，对内容进行提炼，突出主要内容；对形式进行简化，使导航进行折贴、缩小banner等。中屏幕布局中导航可以展开，banner可以适量放大，内容区出现川字型和骨骼型布局。大屏布局在中屏布局基础上，使侧边栏内容呈“display:block”显示状态，适当增加网站内容，突出网站特点，增强网站表现效果，弥补小屏幕的视觉局限性；为浏览者提供新的视觉元素、丰富的页面内容。可见，响应式的设计策略可以提供多样化的布局，使网页在不同终端设备上都能提供良好的用户体验和视觉效果，充分发挥移动互联网渠道广泛、覆盖率高、使用便捷等优势。移动优先策略能够避免移动终端加载过多的资源，无须将PC端样式重新绘制，PC端表现效果也不会受到影响[2]。响应式设计为实现网站移动化提供了一种新的设计策略和选择，随着响应式设计技术的不断发展与完善，其受到关注与应用也将会越来越多[3]。

【参考文献】

[1]彭雪萍.试析响应式网页的设计与开发[J].电脑编程技巧与维护，2018（10）:8-10.

[2]李倩.面向不同设备的响应式网页设计探析[J].教育教学论坛，2017（12）:82-83.

[3]郭彦辉.响应式Web设计的研究与实现[J].软件，2018，39（01）:169-172.

作者：刘巧丽 陈洁彬 贾春柳 单位：衡水学院