蔡伯峰 封景园

摘 要：为适应在各种上网设备尤其是移动设备上浏览网站的需要，介绍了利用基于H5的媒体查询、弹性盒布局等响应式Web设计技术开发响应式网站的方法，并实际分析了一个典型响应式网站主页的设计制作，这对于设计制作类似的网站有很好的借鉴意义。使用响应式Web设计技术开发的网站实现了一次开发、多处适用，从而极大地提高了网站开发效率。

关键词：响应式Web设计;媒体查询;弹性盒布局;HTML5

中图分类号  TP39  文献标识码  A

据中国互联网信息中心报告，随着中国经济由高速增长阶段转向高质量发展阶段，移动支付、网约车、互联网医疗、在线教育等各类“互联网+”新业态层出不穷，我国网民规模及互联网普及率均呈现快速增长态势，截至2020年3月底，我国网民规模达9.04亿，互联网普及率为64.5%。手机网民规模达8.97亿人，远超电脑网民规模，而使用手机上网的比例高达99.3%、使用台式电脑上网的比例42.7%、使用笔记本电脑上网的比例35.1%、使用平板电脑上网的比例29%、使用电视上网的比例32%。移动互联网的影响力不断扩大，占有网民几乎所有的碎片时间，浏览信息、聊天、购物越来越依赖手机。但目前仍有相当多的单位发布的网站只有电脑版网站版本，不方便在各种移动设备上浏览;或者是相分离的电脑版与手机版网站，这增加了网站设计开发、维护和运营成本。随着H5、媒体查询、Bootstrap等标准规范和新技术新方法的陆续发布和推出，其在提高网站的可用性和改进用户友好体验、轻松使用多媒体元素、精简代码优化流量、对SEO更加友好、可移植性等方面的性能大幅提高，给现有网站的更新升级提供了极大便利[1]。……