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

[felixding]

很早就在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去也！

[gjk1992]

您好 弱弱的问一句，v2ex 怎么发帖啊 ，我没找到发帖的 按钮

[chone]

lz给出的例子responsive似乎只针对ios设备，这好像不太"响应"吧。
最近也在学习和研究responsive design相关内容，其中经常就能看到类似lz给出的这样解决方案，但我觉得效果并不是很好，这其实只是针对不同分辨率的设备做出了不同的设计，适应性并不好。
页面元素本身就具有相当的弹性以适应不同的设备，不同的分辨率，这样的设计似乎才能更大范围的兼容和改善用户体验。
另外对于不同分辨率的特别处理，我想到了Modernizr实现渐进增强的方式，根据当前页面的尺寸添加一些特殊的带有特征的class name，然后就可以通过css选择器做一些特殊的定义。
例如
.nav {...}
.pad .nav {...}
.phone .nav {...}

[chone]

@gjk1992 v2ex的主题是在不同的节点下的，要进入相关节点才能发帖。

[felixding]

@chone

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

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

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

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

[chone]

@felixding 嗯，我说的也只是理想值，webapp或者内容不多的站点可以那么做，其他的感觉还是分为基本的desktop版本和mobile版本再做responsive似乎更好一些，毕竟移动设备不可能像桌面设备那样可以显示非常多的内容。
另外最近我有些体会，在"弹性"的时候table式的布局优势又出来了，还有Metro Style这样的极简风格能很好的适应responsive design。

[cmonday]

似乎“从一开始就考虑响应式”就必然导致设计上的结构简单，图片的运用减少，倾向可流式布局的元素，这也是一种很大的制约啊

[felixding]

@cmonday 多少有些。目前用rwd的基本为小型网站，这也从一个侧面反映了这一技术的适用性。

另外，我越来越觉得现在比以往任何时候都需要简单-因为目前严重的信息过载。我在JapMag风格介绍中这样写（原文在GitHub）：

The essential idea behind JapMag is Japanese Minimalism. It focuses on content itself, and aims to solve information overload. On interaction design, JapMag advocates a flat information architecutre, a one-task-one-step method and a natural content flow on each page. Visually, JapMag stresses typography, whitespace and uses graphical elements as little as possible. Technically, JapMag avoids using Javascript, or overriding browsers' default behaviors.

[Sivan]

响应性是个大工程，面面俱到不可能。
其次网站手机端用户有多少？随着 Smart App Banners 推出，iOS 用户为主的网站是否可以直接引导到客户端上？
除去移动端，是否要对不同显示器做响应？
如果开发成本很高，我倒不觉得一定要给项目做响应性。

现在在做的项目只面对 iOS 用户，随着 iPhone5 推出，要写 5个以上的版本。虽然前年开始用时很喜欢，但现在感觉不会再爱了。