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修改css样式style
Apr 15 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
屏蔽script注入小例子
Nov 12 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
jQuery :first选择器使用介绍
2013/08/09 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
python写xml文件的操作实例
2014/10/05 Python
详解python单例模式与metaclass
2016/01/15 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
便捷提取python导入包的属性方法
2018/10/15 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
python3正则模块re的使用方法详解
2020/02/11 Python
django从后台返回html代码的实例
2020/03/11 Python
全球度假村:Club Med
2017/11/27 全球购物
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
工作评语大全
2014/04/26 职场文书
企业文化标语大全
2014/06/10 职场文书
关于颐和园的导游词
2015/01/30 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
同学聚会祝酒词
2015/08/10 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL