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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 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
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
php上传excel表格并获取数据
2017/04/27 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
Python实现SMTP发送邮件详细教程
2021/03/02 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
Django实现跨域的2种方法
2019/07/31 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
应届生会计求职信
2013/11/11 职场文书
仓库主管岗位职责
2014/03/02 职场文书
慈善募捐倡议书
2015/04/27 职场文书
大国崛起英国观后感
2015/06/02 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书