基于HTML 5+CSS3+jQuery的响应式布局网页设计  被引量：11

Design of Responsive Layout Web Page Based on HTML 5 + CSS3 + jQuery

在线阅读下载全文

作　　者：叶潮流[1] 马林山[2] Ye Chaoliu;Ma Linshan(Department of Management,Hefei University,Hefei 230601,China;Library of Hefei University,Hefei 2306010,China)

机构地区：[1]合肥学院管理系,安徽合肥230601 [2]合肥学院图书馆,安徽合肥230601

出　　处：《梧州学院学报》2018年第3期22-35,共14页Journal of Wuzhou University

基　　金：安徽省高等学校人文社科研究重点项目(SK2018A0596);安徽省高等学校自然科学研究一般项目(KJ2015B1105918);地方高校国家级大学生创新创业训练计划项目名(201711059016)

摘　　要：针对固定布局迁移到移动终端时所带来的用户体验不足的问题,该文提出一种基于HTML 5+CSS3+JQuery的响应式布局解决方案。首先用HTML5的语义化结构标记转换固定布局中带有语义化需求的DIV标记;并在<head>标记对中引入视口元素,使得网页能自我感知移动终端的视口尺寸和旋转取向;然后通过CSS3的媒体查询和弹性布局对网页布局进行响应式布局设计;并为图片和文字设置响应式代码;最后为一些需要特殊处理的响应式元素设置JS脚本,最终获取响应式布局网页。实验研究表明,HTML 5+CSS3+JQuery实现了网页在不同的终端之间自由切换和平滑过渡,为移动用户提供了舒适的呈现界面和良好的用户体验。In view of the insufficiency of users’experience when migrating the fixed layout to the mobile terminal,a responsive layout solution based on HTML5+CSS3+JQuery is proposed in this paper.Firstly,semantic structure of HTML5 is used to mark conversion DIV markers with semantic needs in the fixed layout and the viewport elements are introduced in the the<head>mark so that the web pages can be self-aware of viewport size and rotation orientation in mobile terminals.secondly,the responsive layout design of web pages is made through media query andelastic layout of CSS3 and the response code for pictures and text is set.Thirdly,the JS scrip is set for some response elements that need special treatment.Finally,a response type layout of web pages is achieved.The experimental study shows that HTML5+CSS3+JQuery realize free switching and smooth transition of web pages between different terminals,providing a comfortable presentation interface and very good good user’s experience for mobile users.

关 键 词：响应式布局 HTML5 CSS3 媒体查询 视口 

分 类 号：TP391[自动化与计算机技术—计算机应用技术]

 

参考文献：

正在载入数据...

 

二级参考文献：

正在载入数据...

 

耦合文献：

正在载入数据...

 

引证文献：

正在载入数据...

 

二级引证文献：

正在载入数据...

 

同被引文献：

正在载入数据...

 

相关期刊文献：

正在载入数据...

相关的主题
相关的作者对象
相关的机构对象