Yuying Wu

初探响应式设计

May 20, 2015

作为一枚FE,现在才看响应式设计!?说起来不能更不好意思,之前都是听说,可能是工作中比较少机会用到,也没多少动力去学习。

之前写无线页面(H5),常常会碰到在不同设备中,展示有所区别的case,其实也没有注意到,咦,这跟响应式设计有关。

直到最近,专题项目太频繁了,FE人力同时开发PC和WAP页面,少说也得一周,大家都希望在这方向想想办法,释放下人力,那个时候“响应式设计”这个概念在我脑海里面闪过,于是自己也开始去学习、看书,而本文正是看完了《响应式Web设计》写的,算是留下一点点读书的痕迹吧。

首先,什么是响应式设计(RWD, Responsive Web Design)

这个术语由伊桑马克特(Ethan Marcotte)提出。他在A List Apart发表了一篇开创性的文章,将三种已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来,并命名为响应式网页设计。 然后,RWD能做什么?

它是针对任意设备对网页内容进行完美布局的一种显示机制。相反,如果需要根据不同设备提供特定的内容和功能,那就需要一个真正的“手机版”网站。这种情况下,手机版网站会提供与桌面版网站完全不同的用户体验。 OK,其实就我个人而言,读完这本书的最大收获是了解到媒体查询和流式布局的一些技巧,直接就用在工作项目上。

举个栗子:百度经验520专题活动(手机浏览好吗~)

百度经验 | 520专题

对于一个那么“丰满”的页面,页面的元素、内容特别多,怎么破?按照我以前的做法都是用px去定宽定高,只针对用户量最大的屏幕大小去做适配,其他太大或者太小的屏幕,就“顾不上”了~

而这次开发就有点响应式设计的意思了,优化如下,感觉在大部分设备上,看着都蛮舒服的 :)

  • 不同屏幕的元素展现自适应

    • 字体大小改用em 【 1em = 16px 】
    • 元素改用百分比去写宽高【 百分比宽度 = 目标元素宽度 / 上下文元素宽度 】
  • 媒体查询(利用max-height,针对屏幕较矮的设备,尤其是iphone4以及打开微信浏览器的iphone 5c)

    • 根据内容优先的原则,隐藏了一些不必要的元素
    • 必要元素,还是挤爆了屏幕,则对图片或者间距进行收缩 @media (max-height: 510px) { bala bala … } 构建网站时,是优雅降级还是渐进增强?

优雅降级:

优雅降级指的是为现代浏览器制作网站,然后保证为某些老版本浏览器提供基本可用的体验。新特性在老版本浏览器中会降级,且一般会有一个分界点,声明不支持那些老掉牙的浏览器。有些时候用户也仅会被警告他们所使用的浏览器有问题,建议其更换(如“您的浏览器老得让人笑话——建议下载最新版浏览器!”)

渐进增强:

渐进增强与优雅降级恰好相反。渐进增强以恪守web标准的标签为基础,意味着它在所有浏览器中均可用。然后通过CSS样式和必要的Javascript来为更先进的浏览器提供渐进方式的增强体验。

我自己是比较偏向“优雅降级”的。因为我们必须承认,目前浏览器还是很不统一,尤其是还有internet explorer 6之流,虽然我们有很多hack的方法/工具,去让这些老的浏览器看起来更像现代浏览器,但是我觉得大多数情况下,其实只需要提供基本可用体验即可,一来是兼容的成本比较高,二来是还在用老掉牙的用户们可能对酷炫效果的需求不高,不然早就升级了,对吧?(笑)

另外的一些收获就是,知道了很多前端构建工具或者资源站点:

  • Respond.js: A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
  • prefixfree.js: CSS3无前缀脚本,在搜索这个项目时,也发现了它的兄弟项目animatable,很好玩,animatable依赖prefixfree.js将CSS中各个属性的动画效果都展示出来了;
  • Modernizr: 为HMLT5和CSS3而生,基于渐进增强理论来开发的。Modernizr会为所有它检测过的特性添加class类,如果浏览器不支持某个特性,它就为该特性对应的类名加上“no-”的前缀,这样可用检测是否支持新特性,否则降级处理。