浅谈自适应网站的设计

移动化的浪潮席卷而来，自适应网站也应运而生。摆在程序员的面前只有一条路，那就是怎么实现它。

根据小编的经验，仅提供以下3种自适应网站方案，且最后会简要分析下其优劣，以供读者分析使用什么形式的自适应网站。

第一种：跳转适配——两套界面设计，相互独立。

顾名思义就是识别出当前访问该网站的设备，然后跳转到相应的网站。当设备为手机时，网站跳转到手机版网站，当设备为笔记本或台式机时，网站跳转到桌面版网站。

那么问题来了，怎么识别当前访问的设备呢？

①第三方设备识别API

早在2012年，百度开发者中心面向开发者开放了他的终端识别服务，通过开发的API，可以将设备的信息提供给你，并推荐相应的适配方案。第三方处理过大量的设备数据，所以对于识别设备还是有一定的准确度的。

②前端js识别

根据设备对网站的请求信息，可以利用javascript的自带对象进行获取。

【navigator.userAgent】可以简单获取访问设备的信息，比如iphone,android设备等

【window.screen.width】获取当前设备屏幕的宽度，比如iphone 6的屏幕宽度是375（注意，iphone 6的分辨率为750×1334）

根据上面这些简单的信息，不使用第三方的API其实也可以做到大部分设备的适配。

第二种：代码适配——两套界面设计，互为统一。

代码适配其实也分两种，一种是前端代码适配，另一种是服务器适配。

①前端代码适配：即采用【Media Query】技术

方式一：<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"　href="shetland.css" />

方式二：

@media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}

}

方式一、二其实就是【Media Query】技术根据设备的宽度自动帮你加载相应的CSS文件或样式。

方式三：与【Media Query】技术类似，自己用js代码识别设备信息，用js代码加载相应的css文件，从而实现设备适配。

②服务器适配

前端服务将设备信息等传至服务器，后台服务器获取后发送相应的相应信息给前端，前端只负责信息传递工作。

第三种：自适应适配——统一化设计，大小通吃。

顾名思义，做到自适应适配的网站对访问的设备采用统一的设计，这也是最原生且最考验网页界面设计工程师和前端开发工程师能力的时候。

举鞋简单的例子：①在强制不允许设备放大缩小后，网页元素根据百分比%来进行布局；②因设备的分辨率等问题，字体大小改用em或rem等；③图片都是等比例缩放；

④采用大量float属性元素等。

评价与总结

接下来我就简单评价一下这几种方案的优劣。

第一种方案：跳转适配。

实现难度比较低，且不会影响原PC版的页面，只需开发者再开发一套专门用于移动设备的网站就行。不过个人觉得会影响后期的业务维护，毕竟移动版和PC版页面割裂太大，将来业务的开展可能都需要并线进行，治标不治本。此外，不得不再提醒一点就是关于搜索引擎优化的问题，这个请自行百度，百度有出过这方面的推荐方案。

第二种方案：代码适配。

实现难度适中，因为PC端和移动端不免会有业务上和代码上的交差，笔者接触的好多项目就是采用这种方案，总的来说，分析和制定业务标准，对项目的衔接和后续拓展都会有帮助。在SEO搜索引擎优化这块，还是需要注意一点的，怎么注意请自行百度，百度官方有介绍。

第三种方案：自适应适配。

实现难度适中，其实与第二种方案类似，只是因为有了统一的设计语言，代码上可以复用以前项目的，而不是交差使用，一定程度上减轻了开发负担，当然“新”的项目开展，不可避免会造成一定的工作负担，如果原有项目已经很成熟，推荐先使用第二种。