也谈响应式设计:渐进增强与优雅降级

“神秘”的响应式设计

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

此文章是由nikbobo发表在碎碎念分类目录,并贴了标签。将固定链接加入收藏夹。

关于 nikbobo

Nikbobo,本名刘永强,记忆空间站长,男,1998 年出生于广东茂名,至今(2020 年)21 岁,目前(2020 年)就读于广州大学华软软件学院,常以“nikbobo”这个网名混迹互联网。如无特殊注明,Nikbobo 在本站发表的文章,遵循 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议。详情请参阅关于页面的作者介绍。

发表评论

电子邮件地址不会被公开。 必填项已用*标注