lib-flexible淘宝弹性布局实战：适配Retina屏与Rem转换详解

lib-flexible淘宝弹性布局实战：适配Retina屏与Rem转换详解

本文详细解析淘宝弹性布局方案lib-flexible的具体实践步骤，供开发者参考。

页面需求与素材准备

1. 页面需求

目标页面效果如下（设计由设计师决定，非开发职责）：

尺寸标注图（750*1334）：

基于750*1334的设计稿，按开发要求提供以下素材切图：

包含两个下载按钮背景、logo、底部梯形渐变背景及body部分mobile背景图。所有图片均从750*1334设计稿中按原始尺寸截取，例如android.png：

针对Retina显示屏的适配思路如图所示：

解决Retina屏问题的可行方案如下：

1）当devicePixelRatio<=2时，统一使用750设计稿的切图

2）当devicePixelRatio>=2时，统一使用750*1.5=1125尺寸，即所谓@3x设计稿的切图。

将美工提供的750*1334设计稿下的切图存放于img/@2x文件夹：

请美工将750设计稿矢量放大1.5倍，按相同要求提供@3x切图，并存放于img/@3x文件夹：

@3x下图片理论尺寸应为@2x图片*1.5，实际切图可能存在微小误差。

完成需求介绍与素材准备后，下一步是引入核心JS文件并编写CSS样式。

引入flexible.js与基础配置

2. 引入flexible.js

操作十分简单：复制flexible.js内容，在本地新建flexible.js文件并粘贴，存放于js/lib目录：

在HTML页面中尽早引入该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已设置为75px：

CSS编写与Retina屏适配策略

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");
 }
}

现在清楚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实践的全部过程，希望对学习有所帮助。