本文的内容是介绍淘宝柔性布局方案lib-flexible的实践，分享给大家参考。具体内容如下。

1.页面要求。

这是要做的页面效果(不要评论设计，这不是开发者决定的):

这是尺寸图(750*1334):

然后，在750*1334的设计稿基础上，艺术家会根据我的要求提供以下材料的裁剪图：

包括两个下载按钮的背景图片，logo，底部梯形的渐变背景和机身的移动背景图片。注意这些图片是在750*1334的设计稿中剪下的，所以尺寸是设计稿中的原始尺寸，比如android.png:

考虑到视网膜显示屏的问题，结合以下适配思路：

我认为视网膜屏幕问题的可行解决方案是：

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样式。

2.引入灵活的. js

这一步其实很简单。只需复制flexible.js的内容，在本地新建一个flexible.js文件，打开后粘贴进去即可。我把这个文件放在js/lib下面：

然后，在html页面中，尽早引入这个js文件(为了使适配效果更快):

注意：使用lib-flexible时，通常不要写：

复制代码如下：元名称='视口'内容='宽度=设备宽度，最小比例=1.0，最大比例=1.0，用户可缩放=否'/

交给flexible.js自动处理。

然后，在chrome的模拟器中，选择iphone6，你应该会看到html的字体大小已经设置为font-size: 75px:

3.编译CSS的基本要求：

1)除字体大小外，其他所有大小均按750注释稿大小转换为rem单位，转换方式为：注释稿大小/注释稿基准字体大小；

2)批注稿的基准字号=批注稿宽度/10，如果批注稿宽度为750，则批注稿的基准字号为75；批注稿宽度为640，批注稿基准字号为64。(所以淘宝可以在任何设计稿尺寸下使用。)

3)如果需要设置字号，可以根据html的data-dpr属性进行处理，类似下面的写法：

[data-DPR=' 2 ']p { font-size : 16px；}[data-DPR=' 3 ']p { font-size : 24px；}以安卓下载按钮的样式为例说明这种用法。android.png的大小是414*80，所以css说：BTN { width : 414 rem/@ font-size-base；height : 80 rem/@ font-size-base；}因为使用的比较少，所以提前定义了一个变量来保存批注稿的基准字号：

@ font-size-base : 75；因此，px2rem的转换变得非常容易，如上所示。编译less后，将计算正确的rem值：btn { width: 5.52rem高度1.06666667雷姆；}至此，lib-flexible的基本练习结束了，但还有一个问题，那就是视网膜屏幕。到目前为止，我们还没有在下面的@3x图片中提到如何处理这些削减。其实很简单。借助html元素的data-dpr属性，我们可以轻松实现另一种媒介查询，从而在devicePixelRatio=2时启用@3x下的图片，或者以Android下载按钮的样式为例。BTN-Android { background-image : URL('./img/@2x/android.png？[email protected]@ version’)；[数据-dpr='3'] {背景-图像： url('./img/@3x/android.png？[email protected]@ version’)；}}没关系。我不知道data-dpr扮演了什么角色。现在，它仍然发挥着巨大的作用。

注意：

1)由于使用了grunt，需要先安装node和git，然后通过npm安装grunt和bower。2)考虑到以后全屏滚动的效果，这个页面最初是用fullpage.js做的，通过bower引入了jquery和fullpage.js库。3)要求使用js进行模块化。4)运行grunt default完成构造，然后运行grunt server启动静态服务器预览。以上就是淘宝柔性布局方案lib-flexible实现实践的全过程，希望能对大家的学习有所启发。