HTML5技术

淘宝弹性布局方案lib-flexible实践 - 流云诸葛(2)

字号+ 作者:H5之家 来源:H5之家 2015-12-23 08:46 我要评论( )

本篇内容相对简单,一方面补充《从网易与淘宝的font-size思考前端设计稿与工作流》,另一方面也记录下这个页面中积累的一些经验,虽然只是一个小页面,但是也见识到了lib-flexible的威力,毕竟一个页面如果成功应用

本篇内容相对简单,一方面补充《从网易与淘宝的font-size思考前端设计稿与工作流》,另一方面也记录下这个页面中积累的一些经验,虽然只是一个小页面,但是也见识到了lib-flexible的威力,毕竟一个页面如果成功应用了这个方案,更多页面也就不是问题了。

我把源码发出来,有兴趣的人可以下载参考:本页源码。

注:

1) 由于使用了grunt构建,所以需要先安装node ,git,再通过npm安装grunt 和bower

2)考虑到将来可能要做全屏滚动的效果,所以这页面一开始就是用fullpage.js来做的,通过bower引入了jquery跟fullpage.js的库

3) 模块化用到了requirejs

4)运行grunt default完成构建,再运行grunt server启动静态服务器预览。

谢谢阅读:)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 妈妈再也不用担心我的移动端了:网易和淘宝的rem方案剖析 - 菜鸟先飞1992

    妈妈再也不用担心我的移动端了:网易和淘宝的rem方案剖析 - 菜鸟先飞

    2017-03-28 11:01

  • H5弹性盒布局的使用(父容器属性) - novai-L

    H5弹性盒布局的使用(父容器属性) - novai-L

    2017-03-25 14:01

  • 移动端页面开发适配 rem布局原理 - 我正经七百九十九

    移动端页面开发适配 rem布局原理 - 我正经七百九十九

    2017-03-20 10:00

  • html5语义化布局标签 - 橡皮脸

    html5语义化布局标签 - 橡皮脸

    2017-03-06 16:00

网友点评
"