“神秘”的响应式设计

响应式设计是近期比较流行的话题。似乎，一个网站，没有响应式设计，就拿不上台面；似乎，一个网站，有响应式设计就倍感高大……但是，我想说的是，响应式设计，并没有你想像的那么厉害，它的本质，其实就是一堆 Media Queries。

“水土不服”的渐进增强（移动优先）

说到响应式设计，一般有两种情况：移动优先（渐进增强）、Web 优先（优雅降级），但是我想说的是，移动优先在我们的环境下是很难满足需求的。移动优先的最大敌人就是那些非现代浏览器，看看 Bootstrap 3 在 IE8 下的种种问题，至今都得不到解决，而且那些响应式设计兼容 JS 脚本，没有一个是完美的，或多或少都有问题。然而，我们面对的敌人还不仅仅是 IE7/8，还有极度反人类的 IE6！可以说，如果你采用移动优先，如果面对的不是都是现代浏览器的纯手机/平板版网站，那么，你将失去一大部分用户。

依旧“水土不服”的优雅降级（Web 优先）

“渐进增强”无法满足需求，那么优雅降级可以么？答案是不行。为什么不行呢，一个网站，在桌面上可以呈现许许多多的内容，但是在移动端呢？让手机加载一个庞大的网页，这尚且不说，相信做响应式设计的人都是为了满足智能手机，我相信应该不会有人做响应式设计来满足 MTK 山寨机，所以这其实还不算什么大的问题，真正的问题在哪里呢？优雅降级真正要面临的的问题，其实是昂贵的流量资费，速度还是次要的，这才是最大的问题。你想想一个丰富的网页，在优雅降级的情况下，手机端加载一次需要花费多少流量？尤其是像各种门户（腾讯、新浪等），那些网站，如果使用优雅降级，那么手机端访问一次将消耗多少流量？

你想要干嘛

看到这里，你也许不禁要问，渐进增强和优雅降级都不行，那么用什么好呢？甚至部分童鞋还会怀疑我在吐槽，好吧，我承认前面部分的内容就是在吐槽。但是，这样反映了一个情况，我们要对渐进增强和优雅降级进行取舍，所以，真正一个优秀的站点，是要综合考虑哪些地方该渐进增强，哪些地方该优雅降级。所以这就诠释了为什么博客是最适合响应式设计的，因为博客本就内容少，模块少，移动端及时访问一次也不花费多少流量，所以，博客稍作改动就可以实现响应式设计。当然，图片博客除外。下面我就说说我在本站响应式设计改造中的心得吧。

使用 max-width（min-width）而不是 max-device-width（min-device-width）

开始我看到很多知名博客——我爱水煮鱼、月光博客等等，针对响应式设计用的都是 max-device-width（min-device-width），当时不懂，照葫芦画瓢，但是弄完后发现竟然没效果，也许是因为我不是在手机上测试，使用的是火狐的自适应视图，所以看不到效果，当时就纳闷了，后来干脆去研究 Bootstrap，发现 Bootstrap 用的并不是 max-device-width（min-device-width），而是 max-width（min-width），用这个的好处在哪呢，最大的好处就是我们在电脑端也可以体会到响应式设计的优秀之处，你可以尝试缩小浏览器窗口，然后看到随着窗口的缩小，你的网站在改变的美妙一幕，而这是你用 max-width（min-width）体会不到的。

三栏博客模板如何自适应

其实经过了解后，我觉得三栏博客模板是最好做响应式设计的，这是一个简单的响应式设计方案，供参考，目前本站采用的就是这种方案：

• 针对手机竖屏、横屏以及平板竖屏，隐藏左侧边栏和右侧边栏
• 针对平板横屏以及小屏幕的电脑，隐藏右侧边栏
• 针对大屏幕电脑，全部显示（普通情况）

这就完美实现了优雅降级，但是要注意，本站使用优雅降级是因为本站图片加载量不多，图片优化可以说极为完美的情况下，所以不会消耗多少流量，如果你的网站大量使用了碎片化 Icon 而又没有制作成 CSS Sprites 或 Icon Font 的情况下，慎用这种方案，这可能会导致移动端访问造成巨额的流量消耗。