到此，lib-flexible的基本实践就结束了，不过还有一个问题，就是retina屏的问题，到现在都还没提到@3x下图的那些切图怎么办，其实很简单，借助html元素的data-dpr属性，可以轻松实现另一种媒介查询，以便在devicePixelRatio>=2的时候启用@3x下的图片，还是以安卓下载按钮的样式为例，写法是：
.btn-android { background-image: url("../img/@2x/android.png?v=@@version"); [data-dpr="3"] & { background-image: url("../img/@3x/android.png?v=@@version"); } }
这下就OK了，原先还不知道data-dpr有什么作用，现在看看，作用还是挺大的。
注：
1） 由于使用了grunt构建，所以需要先安装node ,git，再通过npm安装grunt 和bower
2）考虑到将来可能要做全屏滚动的效果，所以这页面一开始就是用fullpage.js来做的，通过bower引入了jquery跟fullpage.js的库
3） 模块化用到了requirejs
4）运行grunt default完成构建，再运行grunt server启动静态服务器预览。
以上就是实现淘宝弹性布局方案lib-flexible实践的全部过程，希望对大家的学习有所启发。
您可能感兴趣的文章: