响应式web设计最早来自国外”Responsive Web Design”概念， 而网上对响应式web设计的解释大都千篇一律，摘来摘去，这里切图网www.qietu.com 以长期的响应式前端开发为背景，和从前端的角度对响应式设计做出解释，欢迎转载，但请尊重我们辛苦的打码的不易，保留该文地址，谢谢。
响应式web设计核心代码和实现机制
响应式设计是一项基于css3 media query （css3多媒体查询技术来实现的），无论响应式设计看起来多么高大上，实现起来多么复杂，其实在实现上是可以简化的，可以抓住它的核心代码，响应式的核心代码是：
@media screen and (max-width: 650px) {
….
}
这段代码是当浏览器窗口宽度小于650px时候，网页要呈现的样子，大括号里面写css定义。
响应后的网站能够在手机、平板等设备下友好访问，当然有一点不难理解，就是响应式也同样对 pc上 宽屏幕和窄屏幕有效，因为它的机制是通过 浏览器宽度判断来实现的，所以这跟大家理解的响应式是用于手机端访问的不同，响应式同样可以用在pc端。
响应式web设计 和 独立webapp 的争执？
很多人应该都会在这两方面纠结过 ，我到底要做pc响应式设计 还是独立做个 webapp呢？ 要如何选择？这里切图网从底层开发者的角度分析两者的利弊后，蓝狮注册你可以很快的做出决定，这也是在以往项目中对客户解释比较多的，现在写出来供还不是我们客户的人分享。
响应式web设计的存在主要是为了解决一个问题 —— 让传统pc网站在手机、平板等移动设备下友好显示。（注意：是友好显示。）能够让pc网站在手机等设备下能够访问就很ok了，当然也会尽大可能的让其好看，这种情况下，你不能过分的要求响应后的网页非常非常的漂亮，这一点很难做到。原因是 响应式布局，手机下的排版其实也是 遵循pc网页的结构的 ，只是对结构进行一些微调使其在手机这种小屏幕下能访问。这是技术层面的限制。
如果我对设计感要求很高，要手机端下的网页也非常非常好看要怎么办呢？那么就建议你单独做一个webapp手机版网站，这种情况下你可以随意发挥，蓝狮官网网页想设计成什么样就设计成什么样，我们都可以切出来，这种效果就会很好看。所以综合两者利弊，你是否可以做决定了呢？
响应式web设计需要了解的。
响应式web设计是基于html5 和css3的，所以我们所了解到的ie6~ie8不支持html5所以没法查看响应式web设计效果，需要在ie9+，firefox，chrome等对html5+css3标准支持比较好的浏览器下浏览，这不是技术层面的问题，所以容易理解。当你考虑做web响应式设计的时候，你必须要放弃使用ie6~ie8的用户。（现在的情况，是尽管ie~ie8的用户还是很多，但是依然挡不住很多网站采用响应式设计，我们也相信在不久将来，这种不支持html5+css3不与时俱进的浏览器最终将很快被遗弃。）
文/切图网
标签：响应式Web设计