初探响应式设计

May 20, 2015

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

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

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

首先，什么是响应式设计（RWD, Responsive Web Design）

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

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

举个栗子：百度经验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-”的前缀，这样可用检测是否支持新特性，否则降级处理。