响应性网页设计（Responsive Web Design）的一点点经验

很早就在A List Apart上看到了响应性网页设计（以下简称RWD），但直到今年春天才开始尝试使用。算下来用这个技术有大半年了吧，感觉稍微明白了一点。在此整理一下心得，算是自我总结和抛砖引玉吧。

1、越早开始引入RWD越好
我在自己的3个网站中引入了RWD，它们的情况和收获是：
1） http://dingyu.me －开始没有移动版本，后来引入RWD，工作量中，需要调整一些HTML
2） http://catalog.im －有单独的移动版本，后改移动版为RWD，工作量大，一些部分要调整设计并修改HTML
3） https://getqujing.com －开始设计时即考虑RWD，工作量小，写完桌面版本的CSS再补移动版本的十分自然

所以如果在网站一开始设计和编码时就考虑RWD，那么后面的工作就会比较轻松，而且CSS更好组织和管理。

2、调试工具
Opera Mobile Emulator＋Opera Dragonfly是调试RWD的绝配。前者自带很多移动设备的描述文件，可以直接创建设备模拟器出来；后者则可以远程连接到模拟器，然后用我们都熟悉的Inspector面板调试。截图如下：

https://twitter.com/i/#!/felixding/media/slideshow?url=pic.twitter.com%2FP2WUxwuv

Opera Mobile Emulator也有奇怪的地方，就是它竟然没有内建iOS设备的描述文件。考虑到iOS实际上主导了移动互联网，这个设计还蛮奇怪的。

另外听说iOS 6也可以远程调试了，不过我目前没有可以用iOS 6的设备 -_-!

3、简化media query的写法
你不想在CSS中到处写 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)对吧？幸运的是，在SASS刚刚发布的3.2版中，你可以使用新增的@content定义mixins，比如我的定义是这样的：

/* iPhone 2G, 3G, 3GS, 4, 4S, 5 Portrait */
@mixin iphone_portrait {
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
@include iphone_base(320px);
@content;
}
}

/* iPhone 2G, 3G, 3GS, 4, 4S Landscape */
@mixin iphone_4s_landscape {
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
@include iphone_base(480px);
@content;
}
}

/* iPhone 5 Landscape */
@mixin iphone_5_landscape {
}

有了这些基本定义，你就可以在业务相关的CSS中这样用：

@include iphone_portrait {
h3 {
display: none;
}
}

等于传了一个block给定义好的mixin，非常帅！至于上面那个名为iphone_base()的mixin，那是我定义的另一个包含适用于iPhone的基本CSS的mixin。

哦，如果你还在纯手工打造CSS，那么强烈建议你试试看SASS。


4、RWD相关CSS的组织和管理
现阶段RWD比较烦的地方，就是media query非常分散难于管理，而且貌似业界对这个还没有特别好的办法。

我的方式是，把每个设备相关的CSS单独放在一起，也就是按照设备而非样式来管理代码。这样做的好处是代码没有那么分散，对media query的管理（准确地说是对上述那种预定义mixin的管理）就等于对设备的管理了。

另外，我把常用的mixin都放在一个CSS文件里，这样在每个项目中，只要引入这个文件，就可以使用这些共享的代码。这是比较通行的做法，我这里稍有不同的是，我使用Ruby Gem来管理基本样式（https://github.com/felixding/japmag），包括基本的CSS、Javascript、网站常用的布局和各种模板文件等等，当然这个就不仅仅是RWD了。

总之，善用SASS的mixin，可以极大地让人从管理media query中解脱出来。下面是 https://getqujing.com 的代码片段，可以看到对iPhone的支持变得非常简单了，基本的设定（如页面宽度、padding、字体和间距等等）都已交由iphone_portrait内调的iphone_base(320px)做好，写业务相关的代码就轻松很多：

/* iPhone 2G, 3G, 3GS, 4, 4S, 5 Portrait */
@include iphone_portrait {
@include page_plans;

.Page .My {
.my-navigation {
display: none;
}

h2 {
padding: 0 0 0 25px;
background-repeat: no-repeat;
background-position: left 5px;
@include page_my;
}
}
}

差不多就是这样吧，玩COD去也！