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 相关文章推荐
新手常遇到的一些jquery问题整理
Aug 16 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
javascript实现密码验证
2015/11/10 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
测绘工程本科生求职信
2013/10/10 职场文书
监理资料员岗位职责
2014/01/03 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
小学新学期寄语
2014/04/02 职场文书
法人委托书范本格式
2014/09/15 职场文书
领导工作表现评语
2015/01/04 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
2015年团队工作总结范文
2015/05/04 职场文书