响应式的春天

随着越来越多的智能移动设备的出现，响应式布局设计也映入人们眼帘。在响应式Web设计是，我们需要让设计图的版式在诸多不同的类型的屏幕上都清晰且可读。这不仅意味着要兼顾不同的屏幕尺寸，同时还要确保排版在低分辨率上显示的一样好。非著名”响应式开发框架Bootstrap，是后台管理系统的最爱，然而普通的网站开发却不会那么频繁的使用它，主要是应用场景不需要。

目前较为流行的响应式方案，一种是维护一套优雅的代码；另一种是移动、PC分两套代码开发维护。第一种适用于简单、轻量的页面直接使用CSS3 media 媒体查询实现，相对来说维护一套代码总比维护两套代码要省时省力；第二种适用于复杂的页面，设计结构出入很大。除非你是响应式大咖能驾驭得了，不然还是写两套的好。

由于业务需要这两种开发方式我都尝试过，两种开发方案各有利弊，主要还是要根据应用场景来选择。接下来聊聊的我在响应式开发中的几点心得。

依靠前端CSS方案

这种依靠前端CSS的方案优点有很多，比如：

设计成本低，几乎不需要从新设计移动端

维护一套代码，维护、部署都方便至极

元气兔官网整体页面设计简单、轻量，我选用了第一种方案。
在开发中可能注意下media和display的使用，没有什么难点，正常开发就好了。

PC端展示

移动端展示

两套代码方案

针对PC、移动设计和结构差异较大需求复杂的应用场景。民生中医院我就是使用的这种开发方案。
我认为有两点需要特别需要注意的地方。

相对单位

移动设备种类繁多，要想灵活在各种屏幕上完美展示，就需要使用相对单位（百分比、em、rem等）。
在本项目中rem的使用是通过JS来进行计算的：

document.documentElement.style.fontSize=document.documentElement.clientWidth*20/375+'px';
    window.onresize=function(){
    document.documentElement.style.fontSize=document.documentElement.clientWidth*20/375+'px';
};

在前端进行设备判别，跳转到不同的URL, 下面是移动端的代码：

if( !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    if (window.location == "http://ms-tcm.com/") {
        return false;
    }
    window.location = "http://ms-tcm.com/"; //PC
} else {
    if(window.location && window.location.href.length>19 && window.location.href.substring(0, 20) == "http://m.ms-tcm.com") {
        return false;
    }
    window.location = "http://m.ms-tcm.com"; //移动
}