| 1,477 | 16 | 70 |
| 下载次数 | 被引频次 | 阅读次数 |
针对固定布局迁移到移动终端时所带来的用户体验不足的问题,该文提出一种基于HTML 5+CSS3+JQuery的响应式布局解决方案。首先用HTML5的语义化结构标记转换固定布局中带有语义化需求的DIV标记;并在
标记对中引入视口元素,使得网页能自我感知移动终端的视口尺寸和旋转取向;然后通过CSS3的媒体查询和弹性布局对网页布局进行响应式布局设计;并为图片和文字设置响应式代码;最后为一些需要特殊处理的响应式元素设置JS脚本,最终获取响应式布局网页。实验研究表明,HTML 5+CSS3+JQuery实现了网页在不同的终端之间自由切换和平滑过渡,为移动用户提供了舒适的呈现界面和良好的用户体验。 Abstract：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.
[1]Patel D.Responsive Web Design[J].Courses.iicm.tugraz.at,2014,1(1):194–199.
[2]俞岭,树岸,吴毅坚,等.面向用户体验的Web软件系统优化控制方法[J].计算机科学与探索,2015,9(6):669-681.
[3]王成,李少元,郑黎晓,等.W eb前端性能优化方案与实践[J].计算机应用与软件,2014(12):89-95.
[4]黄雪琴,耿强,陈显军.基于CSS+DIV的自适应宽度网页布局方法[J].计算机与现代化,2014(6):53-55.
[5]刘清堂,胡舰,翟利利,等.跨平台的多终端设备网页自适应布局研究及应用——以农民工技能培训与综合服务平台为例[J].现代教育技术,2015,25(2):107-113.
[6]冯兴利,洪丹丹,罗军锋,等.自适应网页设计中的关键技术[J].计算机应用,2016,36(S1):249-251.
[7]Johnmacarts.Fluid Design or Liquid Layout–Before and After[EB/OL].[2017-02-16][2017-06-04]http://www.johnmacarts.com/fluid-design-or-liquid-layout-before-and-after/.
[8]CHRIS COYIER.A Complete Guide to Flexbox[EB/OL].[2017-03-21][2017-06-04]https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
[9]弗雷恩,奇舞团.响应式Web设计:HTML5和CSS3实战[M].2版.北京:人民邮电出版社,2017:58-60.
[10]孙荣,王菊.用户体验视角下的高校门户网站再设计研究[J].中国教育信息化,2015(9):73-76.
[11]刘德山.HTML5+CSS3 Web前端开发技术[M].北京:人民邮电出版社,2017:14.
[12]Matthew Levine.In Search of the Holy Grail[EB/OL].[2006-01-30][2017-06-13].https://alistapart.com/article/holygrail.
[13]Peter-Paul Koch.A tale of two viewports-part one[EB/OL].[2013-06-17][2017-06-13].https://www.quirksmode.org/mobile/viewports.html.
[14]Peter-Paul Koch.A tale of two viewports—part two[EB/OL].[2013-06-17][2017-06-13].https://www.quirksmode.org/mobile/viewports2.html.
[15]Peter-Paul Koch.Meta viewport[EB/OL].[2014-04-13][2017-06-13].https://www.quirksmode.org/mobile/metaviewport/.
[16]Jack Archibald.The anatomy of responsive images[EB/OL].[2015-09-03][2017-06-13].https://jakearchibald.com/2015/anatomy-of-responsive-images/.
[17]Scott Jehl,Mat Marquis,etc.A RESPONSIVE IMAGE POLYFILL[EB/OL].[2014-04-13][2017-06-13].http://scottjehl.github.io/picturefill/.
[18]陈益全,吴多智.断点在响应式网页设计中的应用研究[J].微型电脑应用,2016,32(5):41-43.
[19]NINE-NINE.详解CSS3弹性盒模型——Flexbox[EB/OL].[2017-05-21][2017-06-13].https://blog.csdn.net/m0_38099607/article/details/72614852.
[20]Manuel Matuzovic.‘flex-grow’is weird.Or is it?[EB/OL].[2015-12-26][2017-06-13].https://css-tricks.com/flex-grow-is-weird/.
[21]涂鸦码龙.flex-grow不易理解,难道不是吗?[EB/OL].[2016-02-24][2017-06-13].http://jinlong.github.io/2016/02/04/flex-grow-is-weird/?utm_source=tuicool&utm_medium=referral.
[22]佚名.响应式文字排版中的基础知识[EB/OL].[2014-09-17][2017-06-13].http://www.woshipm.com/pd/104527.html.
[23]Oliver Reichenstein.Responsive Typography:The Basics[EB/OL].[2012-06-01][2017-6-13].https://ia.net/topics/responsive-typography-the-basics/.
基本信息:
中图分类号:TP393.092
引用信息:
[1]叶潮流,马林山.基于HTML 5+CSS3+jQuery的响应式布局网页设计[J].梧州学院学报,2018,28(03):22-35.
基金信息:
安徽省高等学校人文社科研究重点项目(SK2018A0596);; 安徽省高等学校自然科学研究一般项目(KJ2015B1105918);; 地方高校国家级大学生创新创业训练计划项目名(201711059016)
2018-06-15
2018-06-15