[聚合文章] 到底什么样的设计才是响应式设计

出现的背景

有两个原因：

一是屏幕设备的尺寸繁多，针对 移动端 和 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;
    }
}

响应式设计的好处

工作量会减少？？？？

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

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

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

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

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

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

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

响应式设计的问题

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

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

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

• HTML/CSS文件增大，不利于移动端的加载；
• PC端和移动端的交互不同；
• 一套HTML，不好分别针对搜索引擎做SEO；
• 布局是液态的，布局的复杂度增加，要折腾；

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

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

响应式的未来

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

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