CSS 级别响应式存在的弊端

bootstrap 体积太大，浪费带宽。真正用到 bootstrap 的东西很少，无非就是十二栅格系统的最核心的几个 class, 还有几个container容器，几个 button 样式等。通过 chrome 开发者工具 audits 检测分析，99%左右的资源是没有被用到的。

样式泛滥。使用过 bootstrap 的用户应该一眼就能看出一个网站是否使用了 bootstrap 样式，因为它特点显著，这时候太有辨识度似乎不是一件好的事情，看多了反而会觉得没有个性。

侵入式强。bootstrap 侵入式是很强的。一旦使用了 bootstrap 可能会面临几个问题： 自定义性差，因为没有花费时间去深究 bootstrap 的实现，所以修改一个样式， 可能会导致一系列的连锁反应：我至今也搞不懂以下的写法 .container{margin: 0 -15px} .colunm{padding:-15px} 。 这就意味着你不能想当然的随意使用一个class，你必须花时间成本去学习它的“规则”。 如果你是中途引入了 bootstrap，你修改与之前样式冲突的时间可能会比你自己写要更多。

实现原理落后。bootstrap 使用了流布局的方式实现响应式，主要通过宽度百分比，浮动样式 float 实现。这种方式，时至今日，或许已经稍许落后了， 目前 CSS3 新标准 flex 布局或许是一个不错的替代方案。

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

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

并不能真正的识别用户客户端。由于 CSS 级别的响应式普遍都是通过 @media 的媒介查询方式根据屏幕尺寸判断手机端还是PC端， 这种做法显然是不科学的，例如，将手机横屏 CSS 可能就认为该客户端为 PC，将PC浏览器窗口缩小，CSS 就认为该客户端是手机。 自然基于这种判断渲染出来的界面并不是真正客户需求的。 2.可能导致样式混乱。由于 CSS @media 存在一个临界点，如@media screen and (max-width:800px)， 如果整站代码存在临界点不一致的情况，当窗口尺寸缩小或放到大这一临界点(800px)附近时， 样式就可能出现混乱了。这是常有的事情，相比不做响应式，可能带给用户的麻烦比便利会更多。

代码冗余量大。从 CSS 级别来做的响应式网站代码冗余量是很大的，一方面需要用大量的 CSS 媒介查询代码处理不同尺寸的样式。 一方面 HTML 也会有大量的容易代码，一般而言响应式网站在 PC端效果会丰富一些，手机端就会简洁一些，在这种动态渲染的HTML，普遍存在 一部分 HTML 只有在 PC端才会显示，反之亦然，这就意味着势必有部分HTML在手机/PC是不会出现的。那么不会出现的元素何必要发送给用户呢？无疑是增加了 代码冗余量，消耗了网络带宽。对于访问量大，传输、渲染要求都很高的网站，这点缺点是不可容忍的。

维护成本高。由于一套HTML要同时考虑 PC端、手机端，每修改一个样式，需要在两种条件下进行测试，特别是对于手机端，还要考虑不同厂商不同手机尺寸的各种复杂情况。 修改了 PC端的样式，又有可能影响了手机的效果展示。总之，维护起来相当麻烦。