浅谈自适应网站的设计

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

根据小编的经验，仅提供以下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搜索引擎优化这块，还是需要注意一点的，怎么注意请自行百度，百度官方有介绍。

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

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

转自：http://blog.csdn.net/zhejiangzwj/article/details/52916745

浅谈自适应网站的设计相关推荐

浅谈秒杀系统架构设计
秒杀是电子商务网站常见的一种营销手段. 原则不要整个系统宕机. 即使系统故障,也不要将错误数据展示出来. 尽量保持公平公正. 实现效果秒杀开始前,抢购按钮为活动未开始. 秒杀开始时,抢购按钮可以点 ...
php 如何设计索引_Mysql学习浅谈mysql的索引设计原则以及常见索引的区别
<Mysql学习浅谈mysql的索引设计原则以及常见索引的区别>要点: 本文介绍了Mysql学习浅谈mysql的索引设计原则以及常见索引的区别,希望对您有用.如果有疑问,可以联系我们. 索 ...
浅谈大型网站之负载均衡架构
转载自浅谈大型网站之负载均衡架构概念负载均衡,英文名称为Load Balance,其意思就是分摊到多个操作单元上进行执行,例如Web服务器.FTP服务器.企业关键应用服务器和其它关键任务服务器等 ...
浅谈Hybrid技术的设计与实现【转】
https://www.cnblogs.com/yexiaochai/p/4921635.html 前言浅谈Hybrid技术的设计与实现浅谈Hybrid技术的设计与实现第二弹浅谈Hybrid技术 ...
浅谈Hybrid技术的设计与实现第二弹
前言浅谈Hybrid技术的设计与实现浅谈Hybrid技术的设计与实现第二弹浅谈Hybrid技术的设计与实现第三弹--落地篇接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...
微型计算机在机械设计中的应用,浅谈计算机技术在机械设计制造及自动化中的应用.docx...
浅谈计算机技术在机械设计制造及自动化中的应用当前科学技术与机械制造与自动化技术相互融合,将多种学科中的复合型技术加以整合,形成综合性的机械设计制造自动化学科.作为机械制造的核心内容,自动化在人们的生 ...
浅谈自适应滤波器---（快速RLS算法）
在上一篇博客中(浅谈自适应滤波器)我给大家介绍了关于自适应滤波器的一些入门级的知识,并分析了常规RLS算法单次迭代的计算量级为O[N2],当阶数N增大时相应的计算量显著增大,为了将计算量级降低到O[N ...
浅谈飞控的软件设计（across写的）
关注across很久了,最近发现了它得CSDN,发现了这篇文章,感觉不错,转载保存. 摘自:https://blog.csdn.net/hz770495569/article/details/8657 ...
漫谈程序员(十八)浅谈谷歌用户体验设计准则
#漫谈程序员(十八)浅谈谷歌用户体验设计准则 ##谷歌的愿景 Google用户体验团队致力于创建有用的(useful).快速的(fast).简单的(simple).有吸引力的(engaging). ...

浅谈自适应网站的设计

浅谈自适应网站的设计相关推荐

最新文章

热门文章