高品质外贸建站系统与外贸网站建设服务【tenghoo】

Bootstrap 框架响应式存在的弊端有哪些??

更新时间:2022-05-17 关键词:网站建设 网站设计 网站制作

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端的样式,又有可能影响了手机的效果展示。总之,维护起来相当麻烦。


关于我们

广州腾虎网络科技有限公司开发团队——致力于互联网技术服务、开发及应用,为企事业单位提供一站式、完善的整合网络品牌服务。,并专注于对网络品牌、网络策划、设计视觉等方面的探索和研究,保证了策划、开发、设计、方案实施、研究等完善的专业化运作,根据客户具体情况制定系列专业和规范的客户服务和保障体系,为企业提供周到、放心的一站式服务。

立即咨询

广州市天河区福元南路4号达维商务中心2305 Copyright©广州腾虎网络科技有限公司

粤ICP备13073147号  

粤公网安备 44010602001101号      

咨询 联系我们 电话沟通
Top
立即咨询
我们联系您
24小时热线:
400-603-3310

免费提供行业精准推广方案