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 相关文章推荐
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
在vue项目中封装echarts的步骤
Dec 25 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
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
javascript编程起步(第三课)
2007/02/27 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
requests和lxml实现爬虫的方法
2017/06/11 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
医大实习自我鉴定
2013/12/07 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
班训口号大全
2014/06/18 职场文书
停车位租赁协议书
2014/09/24 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
死亡赔偿协议书
2015/01/28 职场文书
环卫处个人工作总结
2015/03/04 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers