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 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
JTrackBar水平拖动效果
Jul 15 Javascript
javascript 表单规则集合对象
Jul 21 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
微信小程序-API接口安全详解
Jul 16 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
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
Python调用微信公众平台接口操作示例
2017/07/08 Python
python调用java的jar包方法
2018/12/15 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
历史系毕业生自荐信
2013/10/28 职场文书
营销与策划应届生求职信
2013/11/04 职场文书
农村婚礼主持词
2014/03/13 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
工会工作先进事迹
2014/08/18 职场文书
保护动物的宣传语
2015/07/13 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python