响应性网页设计（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去也！

felixding

2012-10-03 21:34:25 +08:00

@chone

首先“响应”其实是没有止境的，有那么多种设备，相信除非是超级大的团队，否则很难响应的过来吧？我选择iOS是根据自己的实际情况来的－我这里大部分移动流量都来自于iOS。如果你愿意的话当然响应越多的设备越好。

其次“弹性”也是有限度的，很多情况下也没办法弹性。而且弹性说到底其实是用百分比（或相对值），但我个人的偏好是能精确到像素绝不用百分比。当然你说的没错，从这个角度来说，这已经不是原作者提出的“响应性设计”了。

最后我现在就是用几级class＋id来组织和管理css的，和你说的有点类似。以下是我的layout文件，你可以看到我用了两个class结合一个id来组织css：

https://github.com/felixding/JapMag/blob/master/app/views/layouts/application.erb