到底什么样的设计才是响应式设计

出现的背景

有两个原因：

一是屏幕设备的尺寸繁多，针对移动端和PC端只少需要两套页面；

二是CSS3的Media Queries的出现，使得CSS3可以探测到浏览器可视区的宽度。

于是Ethan Marcotte就想了，能不能只使用一套HTML结构，然后利用CSS3的Media Queries针对不同的屏幕使用不同的CSS呢。

于是响应式设计诞生了。

来一段响应式代码记念一下：

# HTML
<h1>响应式设计</h1>

# CSS
@media screen and (max-width: 600px) {
/*当屏幕尺寸小于600px时，应用下面的CSS样式*/
h1 {
font-size: 12px;
}
}
@media screen and (max-width: 900px) {
/*当屏幕尺寸小于900px时，应用下面的CSS样式*/
h1 {
font-size: 14px;
}
}
@media screen and (min-width: 900px) {
/*当屏幕尺寸大于900px时，应用下面的CSS样式*/
h1 {
font-size: 18px;
}
}

响应式设计的好处

众人说，设计师只需要一套设计，开发人员只需要开发一套代码。

所以，好处就是工作量的减少！

工作量会减少？？？？

对于设计师来说，工作量绝对等于原来的50%，因为原来需要设计两套，现在只需要设计一套了；

对于开发人员来说，就不能太任性了，HTML结构要写得尽量易于多个布局，CSS在原来PC端的基础上加上响应式(Media Queries)的部分，所以工作量也许是原来的???。

然而，有一个条件，那就是设计是真正的响应式设计！！！因为响应式指的仅仅是CSS的响应式，HTML是不变的，而CSS不是万能的(百能都不是)，针对特定的HTML结构，如果要布局出完全不同的样子，不说能不能做到，就算能做到，代码量也一定比原来的PC+移动多。

所以，工作量取决于响应式设计的可能性和难易程度。

所以，响应式是有限制的，限制在那些瀑布式成局中，限制在液态类型的网站中。

更严重的是，大多数设计压根就不是响应式设计。

如果有人说一个不懂HTML/CSS3的设计师能设计出响应式的设计，我愿意把我的膝盖跪碎。

所以，开发人员郁闷了，连带设计师也郁闷了。

所以，阿里分出了PC端和无线端，大家各干各的。

响应式设计的问题

响应式已经变成了一种噱头，脱离了响应式合理的使用场景，滥用成灾。

为了响应式肆意隐藏网页内容，在PC端能找到的在移动端找不到了，如果你是用户你什么感觉？

还有一些不太重要的问题：

HTML/CSS文件增大，不利于移动端的加载；

PC端和移动端的交互不同；

一套HTML，不好分别针对搜索引擎做SEO；

布局是液态的，布局的复杂度增加，要折腾；

如果看了移动端的Web App，如果看了jQuery Mobile的样子，就会知道响应式设计根本不是为了取代移动端的网页，因为差别太大了，实现太困难了。

响应式设计是为了更好的体验，为了更好的体验，可能会对PC端和移动端分别设计。所以，网站适合用响应式设计的时候才去使用它。

响应式的未来

我并不是黑响应式设计，相反，我相信尽管响应式设计有种种问题，但在以阅读为主、交互少、页面布局简单的网站中仍是最佳选择。

好了，该回到正题了，上面的所有内容都是瞎扯淡的，是热身，写这篇文章的目的是为了弄清楚到底什么样的设计才是响应式设计。下面是正文。

到底什么样的设计才是响应式设计呢？I Don’t Know.