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 相关文章推荐
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
js模拟实现烟花特效
Mar 10 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
10款实用的PHP开源工具
2015/10/23 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
jquery.map()方法的使用详解
2015/07/09 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
Node.js使用Angular简单示例
2018/05/11 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
python实现下载整个ftp目录的方法
2017/01/17 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
Python异常处理知识点总结
2019/02/18 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
python 5个实用的技巧
2020/09/27 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
linux面试题参考答案(4)
2013/01/28 面试题
全国道德模范事迹
2014/02/01 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
2015年护士节慰问信
2015/03/23 职场文书
企业工会工作总结2015
2015/05/13 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang