说起响应式，多数人第一时间想到的就是用 CSS @media 方法来做。 但纵观各淘宝，唯品会，GitHub等大网站，可以发现，他们并没有使用 CSS 媒介查询来实现响应式布局，显然 CSS级别的响应式并不是主流，或者说并不是最佳实践方式。

初识响应式

记得第一次接触响应式这个概念，大约在2013年，那时候 bootstrap 是响应式布局这方面的先驱。 那时才刚开始接触前端这个概念，每次自己写CSS，都要花很久的时间去调试出好看的样式。一次偶然的机会接触到了 bootstrap， 用起来着实不错，搭建一个漂亮的界面简直轻松到了极点。 那时候有了第一台小米手机，开始频繁地用于上网。看到自己写的同一套界面，能够适配电脑、手机端排布还那么漂亮的时候，我觉得，响应式一定是未来的趋势。

后来，只要需要写前端，我自己用或者给别人推荐，我第一个想到的就是 bootstrap。

CSS 级别响应式存在的弊端

再后来，出现了一些问题：

  1. bootstrap 体积太大，浪费带宽。真正用到 bootstrap 的东西很少，无非就是十二栅格系统的最核心的几个 class, 还有几个container容器，几个 button 样式等。通过 chrome 开发者工具 audits 检测分析，99%左右的资源是没有被用到的。
  2. 样式泛滥。使用过 bootstrap 的用户应该一眼就能看出一个网站是否使用了 bootstrap 样式，因为它特点显著，这时候太有辨识度似乎不是一件好的事情，看多了反而会觉得没有个性。
  3. 侵入式强。bootstrap 侵入式是很强的。一旦使用了 bootstrap 可能会面临几个问题： 自定义性差，因为没有花费时间去深究 bootstrap 的实现，所以修改一个样式， 可能会导致一系列的连锁反应：我至今也搞不懂以下的写法 .container{margin: 0 -15px} .colunm{padding:-15px} 。 这就意味着你不能想当然的随意使用一个class，你必须花时间成本去学习它的“规则”。 如果你是中途引入了 bootstrap，你修改与之前样式冲突的时间可能会比你自己写要更多。
  4. 实现原理落后。bootstrap 使用了流布局的方式实现响应式，主要通过宽度百分比，浮动样式 float 实现。这种方式，时至今日，或许已经稍许落后了， 目前 CSS3 新标准 flex 布局或许是一个不错的替代方案。

以上的零零总总，只是个人在使用中以 bootstrap 为例总结说明的一些问题，这些问题如CSS全局污染问题或许可以通过工程化、模块化方法改进。 所以以上并不是响应式网站不能成为主流的真正原因。

而纵观各大网站淘宝，GitHub 等都没有做 CSS 样式级别的响应式网站。而是分别针对手机端、PC端做了两套HTML，这是为什么呢？ 通过一套 HTML 页面使用 CSS 媒介查询实现响应式的缺点有：

  1. 并不能真正的识别用户客户端。由于 CSS 级别的响应式普遍都是通过 @media 的媒介查询方式根据屏幕尺寸判断手机端还是PC端， 这种做法显然是不科学的，例如，将手机横屏 CSS 可能就认为该客户端为 PC，将PC浏览器窗口缩小，CSS 就认为该客户端是手机。 自然基于这种判断渲染出来的界面并不是真正客户需求的。 2.可能导致样式混乱。由于 CSS @media 存在一个临界点，如@media screen and (max-width:800px)， 如果整站代码存在临界点不一致的情况，当窗口尺寸缩小或放到大这一临界点(800px)附近时， 样式就可能出现混乱了。这是常有的事情，相比不做响应式，可能带给用户的麻烦比便利会更多。
  2. 代码冗余量大。从 CSS 级别来做的响应式网站代码冗余量是很大的，一方面需要用大量的 CSS 媒介查询代码处理不同尺寸的样式。 一方面 HTML 也会有大量的容易代码，一般而言响应式网站在 PC端效果会丰富一些，手机端就会简洁一些，在这种动态渲染的HTML，普遍存在 一部分 HTML 只有在 PC端才会显示，反之亦然，这就意味着势必有部分HTML在手机/PC是不会出现的。那么不会出现的元素何必要发送给用户呢？无疑是增加了 代码冗余量，消耗了网络带宽。对于访问量大，传输、渲染要求都很高的网站，这点缺点是不可容忍的。
  3. 维护成本高。由于一套HTML要同时考虑 PC端、手机端，每修改一个样式，需要在两种条件下进行测试，特别是对于手机端，还要考虑不同厂商不同手机尺寸的各种复杂情况。 修改了 PC端的样式，又有可能影响了手机的效果展示。总之，维护起来相当麻烦。

响应式网站的最佳实践

如果不做CSS级别的响应式，那淘宝，唯评会等是如何做到针对手机、PC不同客户端做出对应的界面渲染呢？

先看一下淘宝：
PC端的显示

淘宝pc1
图1 淘宝pc1

淘宝pc2
图1 淘宝pc2

可以看出的是，无论浏览器尺寸如何缩小，都不会呈现出手机端会出现的效果。

手机端的展示（用chrome浏览器模拟）：

淘宝phone
图1 淘宝手机

同样在手机访问的结果界面中，对窗口进行放大缩小，也能收缩自如，布局完好，不会呈现出pc浏览器的结果。

结果和CSS控制的响应式看起来似乎是一样的 。但细心的人稍许注意就可以发现，通过PC访问 www.taobao.com 最终访问的还是定位在该网址，而通过手机 访问 www.taobao.com 将会被跳转到 www.m.taobao.com 一个专门针对移动客户端而做的网站。而实现的原理也很简单，服务器通过识别用户发送的http请求头 user-agent来识别用户访问的设备信息，根据该值判定设备为PC或移动客户端，并根据结果跳转到与之对应的网址。

通过识别请求头user-agent分流客户，一方面更准确的为客户提供与之对应的服务，节省了带宽资源，增加了网站的个性化，可维护性。另一方面，还对性能有所提升， 这种分流策略类似于 ngnix，还减轻了服务器压力。

综上所述，并不是否认CSS级别的响应式，即便是使用了设备分流的网站，也可以使用CSS @media特性针对PC/移动客户端的不同尺寸的样式调整。 也不是说 CSS 级别的响应式一无是处，对于中小型网站来说，这也是一个不错的选择，因为它快速有效，没有时间和精力部署两套系统网站复杂度不是很高的情况下，其实CSS级别的响应式是个不错的选择。 （个人网站响应式就是用CSS做的[捂脸，撤]）