为什么CSS响应式布局不是主流

说起响应式,多数人第一时间想到的就是用 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做的[捂脸,撤])

 

原文地址

未经允许不得转载:绿岛小站 » 为什么CSS响应式布局不是主流

赞 (0)

评论 0

评论前必须登录!

登陆 注册