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 动态调整图片尺寸实现代码
Dec 28 Javascript
jQuery拖动图片删除示例
May 10 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
bootstrap table小案例
Oct 21 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
正则表达式优化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遍历数组的几种方法
2012/03/22 PHP
php封装一个异常的处理类
2017/06/08 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
JS Array对象入门分析
2008/10/30 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
js 内存释放问题
2010/04/25 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
python数据类型_字符串常用操作(详解)
2017/05/30 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
红旗方阵解说词
2014/02/12 职场文书
《雾凇》教学反思
2014/02/17 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
学校推普周活动总结
2015/05/07 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
导游词之峨眉山
2019/12/16 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
Win2008系统搭建DHCP服务器
2022/06/25 Servers