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 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
Vue自定义指令使用方法详解
Aug 21 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
vue组件是如何解析及渲染的?
Jan 13 Vue.js
正则表达式优化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
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
常用js脚本
2006/12/03 Javascript
学习ExtJS table布局
2009/10/08 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
Javascript之String对象详解
2016/06/08 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
自主招生自荐信指南
2014/02/04 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
中秋晚会策划方案
2014/06/12 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
学生党员检讨书范文
2014/12/27 职场文书
信仰纪录片观后感
2015/06/08 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js