浅析响应式网页设计

Posted 2021-04-30 国人伟业

随着移动互联网高速发展，智能手机的普及速度扩新设备层出不穷，为跟上时代的脚步，时下想要跟随新潮流的公司纷纷进入当代多屏世界，以时髦的响应式网站吸引来自不同终端的用户。其中也不乏一小部分不甚了解什么是响应式网站的客户，今天就给大家简单的科普下什么是响应式网站，响应式网站与传统网站的优缺点：

一、什么是响应式网站

响应式Web设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。简单来说就是适配各种终端的网页设计。根据不同的屏幕宽度加载不同的结构。

二、需不需要响应式

对于响应式页面，很多人都以为是一种网站跨平台的解决方案。但是对于绝大部分的网站来说，其实就是一种排版技巧。只是这种排版技巧带有很多的细节调整。并不是所有的网站都适合响应式设计。所以不要盲目跟风：

1、国内的一些电商类网站不适合做响应式网站

原因：因为国内的电商类网站都太复杂，整个页面都是内容庞大且形式复杂多变，一个页面里承载的内容太多，这对于响应式页面来说是大忌，或者说是响应式页面根本无法实现的。

2、部分功能型网站不太适合

比如说，内容展示型的网站，比如企业官网，确实很适合响应式的页面，但是具有一定功能性的网站就不一定适合了。

原因：资讯型网站页面结构比较单一，适合响应式的前端页面内容微调。而具有一定功能型的网站对于页面的整体排版和样式要求较高。

3、响应式网站时间投入更大

由于响应式网站的页面调整需要花大量的时间，如果项目时间很紧的话，要好好考虑一下，衡量时间成本与最终产出的意义是否成正比。

4、考虑目标用户的浏览器支持情况

响应式页面的代码需要更高版本的浏览器才能正常浏览，比如在IE9以上版本才能正常显示，企业在做响应式网页前需要做一个调查，调查自己网站的目标用户大多使用什么类型的浏览器，然后再针对性做出是否做响应式页面的决定。

三、响应式网站的优点和缺点

响应式页面的优点

1) 跨平台：在手机、pad、电脑上均有不俗的表现。

2) 一个URL：让你的用户在移动设备上更容易找到，而且不需要任何的重定向，这在较慢的网速下特别的有用。

3) 更少维护：开发一个独立的移动网站，会增加你的工作负担。实际上你就拥有了两个独立网站。如果你有一个响应式网站，维护的成本将会很小，因为它只有一个布局，且可工作在所有类型的设备上，而这可以明显地减少你的工作量。

4) 表现力一致：在不同的平台上看到的东西都是基本一致的，会让感觉体验良好。

响应式页面的缺点

1) 自由度太低，局限性较大：你需要考虑在手机，pad，PC上三种屏幕下的页面内元素的呈现，会导致有着非常大的局限，比如说我在PC上是横向滑动的通栏图，但是在手机和pad就是不用的。所以，你就只能用一张单一的图或者一组静态图来表达。

2) 浏览器兼容性不足：对于IE6,7,8等就直接悲剧了，页面简直惨不忍堵。如果您是企业经营者，与跟随潮流相比，尽可能地与客户成交才是最重要的。

3) 时间花费：开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站，可能耗时更多。如果你想要一个响应式网站，最好从草图开始重新设计。

4) 页面会比较大：由于响应式页面是同时下载多套CSS样式代码，可能在手机上就下载PC/pad的冗余代码，其实毫无意义，而且浪费了流量资源。

5)优化搜索引擎：对于响应式Web设计，为搜索引擎确定关键字不是一件容易的事。因为相比一般桌面用户，移动用户多采用不同的关键字，修改标题及其他事项都比较困难。

总结来说，事物都是利弊结合，响应式只适用某些网站，不可一概而论，各种移动设备的发展导致每种移动设备都希望拥有适合自己设备的网页。但是Web设计和开发根本无法追赶设备与分辨率的更新，如果不能满足各种设备下用户的使用，就会流失掉用户群，响应式设计的出现有效地解决了这个问题。