js中flexible.js实现淘宝弹性布局方案


Posted in Javascript onJune 23, 2020

本文的内容就是介绍淘宝弹性布局方案lib-flexible实践,分享给大家供大家参考,具体内容如下

1. 页面需求

这是要做的页面效果(不要对设计置评,这不是开发人员决定的):

js中flexible.js实现淘宝弹性布局方案

这是尺寸标注图(750*1334):

js中flexible.js实现淘宝弹性布局方案

然后美工在750*1334的设计稿之上,按我的要求提供以下素材的切图:

js中flexible.js实现淘宝弹性布局方案

包括两个下载按钮的背景图片,logo,底部梯形的渐变背景和body部分的mobile 背景图。注意这些图片都是在750*1334的设计稿里面切出来的,所以尺寸都是设计稿里的原始尺寸,比如android.png:

js中flexible.js实现淘宝弹性布局方案

考虑到retina显示屏的问题,结合下图的适配思路:

js中flexible.js实现淘宝弹性布局方案

我认为解决retina屏问题的可行方案是:

1)在devicePixelRatio<=2时,图片统一使用750设计稿的切图

2)在devicePixelRatio>=2时,图片统一使用750*1.5=1125,也就是所谓@3x设计稿的切图。

我把美工给我的在750*1334的设计稿下的切图都放在img/@2x 这个文件夹下:

js中flexible.js实现淘宝弹性布局方案

然后让她帮忙把750的设计稿矢量放大1.5倍,再按照同样的切图要求为我提供@3x的切图,并放在了img/@3x 这个文件夹下:

js中flexible.js实现淘宝弹性布局方案

@3x下的图片理论上尺寸应该等于@2x下的图片*1.5,不过我的切的没有这么完美。

有了前面的需求介绍和素材准备,下一步就是该引入核心的js文件,编写css样式了。

2. 引入flexible.js

这一步其实非常简单,只要把flexible.js的内容复制出来,在本地新建一个flexible.js的文件,打开粘贴进去就可以了,我把这个文件放在了js/lib下面:

js中flexible.js实现淘宝弹性布局方案

接着在html页面里面,尽可能早的引入这个js文件(为了让适配的效果更快):

js中flexible.js实现淘宝弹性布局方案

注:使用lib-flexible,通常不要写:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

交给flexible.js自动处理。

然后在chrome的模拟器里面,选择iphone6,应该就能看到html的font-size已经被设置为font-size: 75px了:

js中flexible.js实现淘宝弹性布局方案

3. 编写CSS
基本要求:

1)除font-size外,其它大小都根据750标注稿的尺寸,转换成rem单位的值,转换方法为:标注稿尺寸 / 标注稿基准字体大小;

2)标注稿基准字体大小 = 标注稿宽度 / 10,如标注稿宽为750,标注稿基准字体大小为75;标注稿宽为640,标注稿基准字体大小为64;(所以淘宝这个方案是可以在任意设计稿尺寸下使用的)

3)如果需要设置font-size,可跟据html的data-dpr属性来处理,类似下面的写法:

[data-dpr="2"] p {
 font-size: 16px;
}

[data-dpr="3"] p {
 font-size: 24px;
}

以安卓下载按钮的样式为例,说明这种用法。android.png的尺寸为:414*80,所以css这么写:

.btn {
 width: 414rem/@font-size-base;
 height: 80rem/@font-size-base;
}

由于用了less,事先定义了一个变量来保存标注稿基准字体大小:

@font-size-base: 75;
所以px2rem的转换变得非常容易,如上所示。less编译之后,会将正确的rem值计算出来:

.btn {
 width: 5.52rem;
 height: 1.06666667rem;
}

到此,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实践的全部过程,希望对大家的学习有所启发。

Javascript 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 #Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 #Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 #Javascript
JQuery实现的按钮倒计时效果
Dec 23 #Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 #Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 #Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 #Javascript
You might like
PHP数组交集的优化代码分析
2011/03/06 PHP
PHP中用hash实现的数组
2011/07/17 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
python 简易计算器程序,代码就几行
2009/08/29 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
使用tensorflow实现线性svm
2018/09/07 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
python 安装impala包步骤
2020/03/28 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
高三高考决心书
2014/03/11 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
Python图像处理之图像拼接
2021/04/28 Python
Golang 对es的操作实例
2022/04/20 Golang