网页首页布局规划图解析：深入探讨响应式网页设计的布局策略

何为适应性网页布局

适应性布局，亦称Responsive Web Design。它将现有的开发技术（弹性网格布局、弹性图像、媒体和媒体查询）融合在一起，实现对网页内容在各种设备上“完美”呈现的一种显示策略。简而言之，这是一种让网站适应多种终端（手机、平板、电脑）的布局方案，无需为每个终端编写特定版本的代码。

资料来源：《HTML5布局之道》

适应性网站的优势与不足

实际上，安徽码农科技撰写关于适应性网站的文章，是因为近两年适应性网站确实备受追捧，许多客户在业务员的推销下，对其功效感到无比神奇，甚至业务员自己都深信不疑，误以为自己被“洗脑”，认为适应性网站无所不能，完美无缺。实则，适应性网站并非完美无瑕，它也存在诸多不足之处。

何为适应性网站？

适应性网站设计需根据用户使用的设备分辨率进行相应调整，以最大程度满足不同设备用户的体验需求。适应性网站设计即是一个网站能够适应多种终端，无需为每个终端制作特定版本。简单来说：一个适应性网站＝手机网站＋平板端网站＋PC网站。具体的实现方式由多方面因素决定，包括弹性网格、弹性图像、CSS媒体查询（media query）的使用等。

弹性网格（flexible grids）

可基于屏幕分辨率调整或扩展内容。

弹性图像（flexible grids）

在小屏幕上可缩小尺寸，并可扩展至最大尺寸以支持大屏幕。

媒体查询（media queries）

是放置在站点HTML和样式表中的代码片段，用于收集设备显示能力的信息以支持多种界面形式。

以下，安徽码农科技将为大家总结适应性网站的优缺点。

适应性网站优点

1:用户体验良好

随着电脑尺寸多样化，智能设备（平板/智能手机）普及化，在当前追求用户体验至上的时代（2016年），之前网站普遍采用固定宽度（960px或1000px）已无法满足现在不同设备与不同分辨率的需求。在高分辨率电脑宽屏显示器上，两边留白过多。在手机上显示，内容显示过小，用户为了看清楚，首先需要放大界面，再左右拖动界面。适应性网站可以根据不同终端、不同尺寸和不同应用环境，自动调整界面布局、展示内容、内容大小，提供非常好的视觉展示效果，一致性友好体验。

2:SEO友好

由于适应性网站在不同终端具有友好的界面展示效果，用户可以与网站保持持续联系，例如URL不变积累分享；通过单一的URL地址收集所有的社交分享链接，优化搜索引擎。搜索引擎也在变得越来越智能，它们足够智能可以完成移动网站和桌面网站的连接。

3:多个网站只需一个后台即可完成全部网站维护，无需额外增加负担。说到这里，你可能会说，不做适应性网站，做个手机站也可以数据同步，一个后台。说得非常对，但是这只限于维护一般的新闻内容与产品等，并不是所有内容都可以一站同步。比如网站banner上与一些特定地方的图片尺寸，就需要分两次裁剪。

适应性网站缺点

1:对低版本浏览器兼容性不友好

对于老版本浏览器支持不佳，这是一个致命问题。老版本浏览器上打开适应性网站会经常出现图片显示不全、排版错乱等情况。

2:灵活性有所欠缺

基于不同终端的设备属性不同，对产品用户体验要求就会截然不同。内容较多且具有功能性的网站不适合做适应性网站设计，如：电商类型网站，宽屏的PC端内容如果全部要在手机端进行展示，势必导致手机端的界面非常长，需要根据手机端属性进行重新信息框架设计，这样对适应性网站要求非常高，实现难度与成本非常高。但是大型网站为了提高用户体验，通常做法，把高分辨率宽屏网站最小的响应尺寸响应到1024px，不再适配手机端，手机端重新设计开发一套手机网站，简单理解为2.5响应，如：电商网站亚马逊、Calvin Klein、Nike、视频网站YouTube等。

3:速度可能会变慢

由于适应性页面是同时下载多套CSS样式代码，可能在手机上就下载PC、平板的冗余代码，导致文件变大，影响加载速度。不过CSS样式的代码占用内存相对图片来说不算大，所以如果前端编程处理得好前提之下，这就不会影响网站加载速度。

4:开发成本较高

这个价格预算问题也往往是大家最关心的一个问题，说到这里，大家可能觉得奇怪，适应性网站只是一个网站，为什么比手机站与电脑站分开做两个要贵！主要原因是：

一、企业网站定制最重要的成本就是人力成本，适应性网站制作需要资深设计师与资深程序员。而独立制作各版本只需要普通设计师和普通工程师即可，但是适应性网站开发则必须资深设计师和资深程序员才能搞定，所以导致非常大的区别。资深设计师与程序员与普通的对比，这个道理大家都懂得，所以适应性网站价格较高。

二、适应性网站需要注意的细节太多，比如一个普通的JS效果，需要考虑3-4个终端的区别，编写的JS代码兼容性要非常好，根据以往开发经验，这样的细节注意要比普通网站多3-5倍。细节注意多了，开发周期就比较长，工时就是这样上来的。

三、市面上很多适应性网站往往是不考虑网速的，在移动端和PC端需要加载的页面数据往往是一样多，导致的结果是，如果用户采用2G/3G的网速，不但速度慢而且耗流量。一个完美的适应性网站不应该是这样的，但是做到这点需要的技术难度确实非常高，所以这也导致成本增加。

温馨提示：企业是否做适应性网站，取决于对自身网站的定位。若是一般的企业官网，网站内容较少，预算又充足，对网站页面要求较高的客户可考虑做适应性网站。

温馨提醒：企业是否打造适应性网站，关键在于对自身网站的定位。若系普通企业官方网站，页面内容不多，预算充足，且对页面质量有较高要求的用户，可考虑打造适应性网站。

若计划构建功能型网站，页面内容丰富，需分别针对电脑和手机进行设计。其实稍加留意便可知晓。适应性网站真的如此优秀，为何京东不采用，天猫淘宝也不采纳？首先，技术实现难度较大；其次，这类功能型网站确实不适宜采用适应性设计。