基于HTML 5+CSS3+jQuery的响应式布局网页设计

摘要

针对固定布局迁移到移动终端时所带来的用户体验不足的问题,该文提出一种基于HTML 5+CSS3+JQuery的响应式布局解决方案.首先用HTML5的语义化结构标记转换固定布局中带有语义化需求的DIV标记;并在标记对中引入视口元素,使得网页能自我感知移动终端的视口尺寸和旋转取向;然后通过CSS3的媒体查询和弹性布局对网页布局进行响应式布局设计;并为图片和文字设置响应式代码;最后为一些需要特殊处理的响应式元素设置JS脚本,最终获取响应式布局网页.实验研究表明,HTML 5+CSS3+JQuery实现了网页在不同的终端之间自由切换和平滑过渡,为移动用户提供了舒适的呈现界面和良好的用户体验.