一，flexible.js 的使用方式：

github地址：https://github.com/amfe/lib-flexible
官方文档地址：https://github.com/amfe/article/issues/17
本文中有部分内容引至上面这个文档。

（一），引用方式

1，引用cdn地址

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"
></script>

（二），flexible.js原理

在页面中引入flexible.js后，flexible会在标签上增加一个data-dpr属性和font-size样式
js首先会获取设备型号，然后根据不同设备添加不同的data-dpr值，比如说1、2或者3，从源码中我们可以看到。

if (!dpr && !scale) {var isAndroid = win.navigator.appVersion.match(/android/gi);var isIPhone = win.navigator.appVersion.match(/iphone/gi);var devicePixelRatio = win.devicePixelRatio;if (isIPhone) {// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {dpr = 3;} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {dpr = 2;} else {dpr = 1;}} else {// 其他设备下，仍旧使用1倍的方案dpr = 1;}scale = 1 / dpr;
}

另外，页面中的元素用rem单位来设置，rem就是相对于根元素的font-size来计算的，flexible.js能根据的font-size计算出元素的盒模型大小。这样就意味着我们只需要在根元素确定一个px字号，因此来算出各元素的宽高，从而实现屏幕的适配效果。

（三），把视觉稿中的px转换成rem

工作中我们常见的视觉稿大小大至可为640、750、1125三种。不过flexible.js并没有限制只能用这三种，所以你还可以根据自身情况来调整，具体如何转换，我们以视觉稿为640px的宽来举例子，把640px分为100份，每一份称为一个单位a，那么每个a就是6.4px，而1rem单位被认定为10a，此时，1rem=1(a)X10X6.4(px)即64px。

640px/100=6.4px                              1个单位a为6.4px
1rem = 10a                                   1rem单位被认定为10a
1rem = 1(a)*10*6.4(px) = 64px

因此，对于视觉稿上的元素的尺寸换算，只需要原始px值除以rem基准px值(此例子中为64px)即可。例如240px * 120px的元素，最后转换为3.75rem * 1.875rem。

flexble.js自适应布局相关推荐

js移动端rem.js自适应布局代码
rem 是 css 的长度单位,它是相对于元素的 font-size 的相对值.假设 html { font-size: 20px; },那么 1rem 就等于 20px. 新建rem.js文件 ( ...
H5+JS+相对单位rem实现第三方支付页（输入金额+模拟数字键盘+自适应布局+大写金额）
最近做了个第三方支付页,H5+JS+相对单位rem实现(输入金额+模拟数字键盘+自适应布局+大写金额). 源码github地址:https://github.com/XieTongXue/how-to ...
js页面自适应屏幕大小_移动端自适应布局方法的calc()与vw
前端人员在处理移动端自适应布局时,目前前端最流行的方法应该就是使用媒体查询,来设置HTML的字体大小,然后用rem为单位对Dom的宽高进行设置,这个方法的优势在于兼容性方面很好,劣势则在于当前市场上不 ...
移动端自适应布局和响应式页面兼容移动端布局
上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局--移动端自适应布局和响应式页面兼容移动端布局. 目录一.移动端自适应布局 1.rem 什么是rem ...
css经典布局——头尾固定高度中间高度自适应布局
今天说说一个经典布局:头尾固定高度中间高度自适应布局! 转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局. ...
Web自适应布局你需要知道的所有事儿
有这样一个问题. 请说说你知道的所有web布局方式? 一般来说,有以下这些布局方法: 浮动 float:left|right inline-block display:inline-block fle ...
使用移动自适应布局+easy mock实现移动界面的简单实现
一.使用easy mock模拟数据 easy mock链接地址二.自己写移动自适应布局自己编写主要是利用rem进行宽度栅格布局: html {/* 相当于一个界面适配器,pc以及移动端都可以进行设 ...
关于页面的多种自适应布局——三列布局
简单结构1,列表在前,更多列表在中间,内容在后 1 <style type="text/css"> 2 .layout{background-color:gray; p ...
关于页面的多种自适应布局——两列布局
我们在切页面的时候打交道最多的就是关于布局排版的技巧,我这里总结了一些平时做页面时用的到各种布局技巧,作为笔记便于日后随时查询. 1.简单结构1,列表在前,内容在后 1 <style type= ...

flexble.js自适应布局