文章目录[隐藏]
“神秘”的响应式设计
响应式设计是近期比较流行的话题。似乎,一个网站,没有响应式设计,就拿不上台面;似乎,一个网站,有响应式设计就倍感高大……但是,我想说的是,响应式设计,并没有你想像的那么厉害,它的本质,其实就是一堆 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 的情况下,慎用这种方案,这可能会导致移动端访问造成巨额的流量消耗。