基于Bootstrap的响应式网页设计中断点研究.doc

基于Bootstrap的响应式网页设计中断点研究
摘要: Bootstrap框架采用CSS栅格系统对不同显示设备具有自动适配能力。为使不同尺度、不同分辨率以及不同放置方向的显示设备均能正常显示网页内容,需要设置合理的视口宽度断点。通过对响应式网页设计中断点阈值设置方案、断点图绘制方法进行研究,提出了针对不同设备的断点设定方案。实验表明,该方案能适应主流显示设备,在保持页面内容不变的同时,实现多类型显示设备的一致性显示,进而大大缩减研发人员工作量。关键词:响应式网页设计;Bootstrap;媒体查询;移动互联网DOI::TP306文献标识码:A 文章编号:16727800(2017)004002503
0引言随着移动互联网的飞速发展,移动终端设备纷纷面市,这对网络应用端的设计提出了新的要求。若要针对每一种终端各做一套页面,会增加运营成本和后期维护成本。因此,一种能满足各种设备分辨率,在不同屏幕、不同系统平台环境下保持网页布局的一致性,满足用户一致体验的网页已成为网页设计的发展方向。响应式网页设计能让同一个页面根据不同显示设备的屏幕尺寸自动调整网页布局,保证页面呈现最佳显示效果[1]。其中,网页布局调整的阈值就是断点,设置合适的断点是开发高性能响应式网页的重要节点。
Bootstrap框架是目前较流行的响应式设计框架之一,本系统对Bootstrap框架下的断点设置进行了研究,提出了能适应绝大多数设备的断点设置方案。“响应式网页设计”是指该设计模式能根据显示器尺寸、分辨率以及放置方向,自动调整页面,使之能以最佳显示模式呈现给用户[2]。页面设计应该遵循模块化设计原则,使其能“可扩展、无浸染”,能适配任何型号的移动终端显示器,无需另外开发“子网站”。简言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。无论用户正在使用笔记本电脑、iPad 还是智能手机,所要浏览的页面能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备,即页面能自动响应用户的设备环境。〖JP〗 Bootstrap框架是响应式网页设计中运用