原文链接：rem自适应布局-移动端自适应必备 版权所有，转载时请注明出处，违者必究。
由于移动端特殊性，本文讲的是如何使用rem实现自适应，或叫rem响应式布局，通过使用一个脚本就可以rem自适应，不用再为各种设备宽度不同而烦恼如何实现自适应的问题。
rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高。1rem=16px(浏览器html的像素，可以设定这个基准值），假如浏览器的html设为64px，则下面的元素则1rem=64px来运算。·
阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。
实现方法：
通过js来调整html的字体大小，而在页面中的制作稿则统一使用rem这个单位来制作。关键代码如下：
1 ;(function(win, lib) { 2 var doc = win.document; 3 var docEl = doc.documentElement; 4 var metaEl = doc.querySelector('meta[name="viewport"]'); 5 var flexibleEl = doc.querySelector('meta[name="flexible"]'); 6 var dpr = 0; 7 var scale = 0; 8 var tid; 9 var flexible = lib.flexible || (lib.flexible = {}); 10 11 if (metaEl) { 12 console.warn('将根据已有的meta标签来设置缩放比例'); 13 var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); 14 if (match) { 15 scale = parseFloat(match[1]); 16 dpr = parseInt(1 / scale); 17 } 18 } else if (flexibleEl) { 19 var content = flexibleEl.getAttribute('content'); 20 if (content) { 21 var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); 22 var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); 23 if (initialDpr) { 24 dpr = parseFloat(initialDpr[1]); 25 scale = parseFloat((1 / dpr).toFixed(2)); 26 } 27 if (maximumDpr) { 28 dpr = parseFloat(maximumDpr[1]); 29 scale = parseFloat((1 / dpr).toFixed(2)); 30 } 31 } 32 } 33 34 if (!dpr && !scale) { 35 var isAndroid = win.navigator.appVersion.match(/android/gi); 36 var isIPhone = win.navigator.appVersion.match(/iphone/gi); 37 var devicePixelRatio = win.devicePixelRatio; 38 if (isIPhone) { 39 // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 40 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 41 dpr = 3; 42 } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ 43 dpr = 2; 44 } else { 45 dpr = 1; 46 } 47 } else { 48 // 其他设备下，仍旧使用1倍的方案 49 dpr = 1; 50 } 51 scale = 1 / dpr; 52 } 53 54 docEl.setAttribute('data-dpr', dpr); 55 if (!metaEl) { 56 metaEl = doc.createElement('meta'); 57 metaEl.setAttribute('name', 'viewport'); 58 metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); 59 if (docEl.firstElementChild) { 60 docEl.firstElementChild.appendChild(metaEl); 61 } else { 62 var wrap = doc.createElement('div'); 63 wrap.appendChild(metaEl); 64 doc.write(wrap.innerHTML); 65 } 66 } 67 68 function refreshRem(){ 69 var width = docEl.getBoundingClientRect().width; 70 if (width / dpr > 540) { 71 width = 540 * dpr; 72 } 73 var rem = width / 10; 74 docEl.style.fontSize = rem + 'px'; 75 flexible.rem = win.rem = rem; 76 } 77 78 win.addEventListener('resize', function() { 79 clearTimeout(tid); 80 tid = setTimeout(refreshRem, 300); 81 }, false); 82 win.addEventListener('pageshow', function(e) { 83 if (e.persisted) { 84 clearTimeout(tid); 85 tid = setTimeout(refreshRem, 300); 86 } 87 }, false); 88 89 if (doc.readyState === 'complete') { 90 doc.body.style.fontSize = 12 * dpr + 'px'; 91 } else { 92 doc.addEventListener('DOMContentLoaded', function(e) { 93 doc.body.style.fontSize = 12 * dpr + 'px'; 94 }, false); 95 } 96 97 98 refreshRem(); 99 100 flexible.dpr = win.dpr = dpr; 101 flexible.refreshRem = refreshRem; 102 flexible.rem2px = function(d) { 103 var val = parseFloat(d) * this.rem; 104 if (typeof d === 'string' && d.match(/rem$/)) { 105 val += 'px'; 106 } 107 return val; 108 } 109 flexible.px2rem = function(d) { 110 var val = parseFloat(d) / this.rem; 111 if (typeof d === 'string' && d.match(/px$/)) { 112 val += 'rem'; 113 } 114 return val; 115 } 116 117 })(window, window['lib'] || (window['lib'] = {}));
从上面的代码，主要是改变了dpx和document的font-size大小。大小为docEl.getBoundingClientRect().width / 10 + 'px';
假设我们的设计稿宽是640的，则html的字体大小则被设为64px.则相当于1rem=64px。
假如一个元素的宽是160px,在平时，我们可以采用百分比可以做到自适应，假如使用响应式的话，可能需要设置多个，比如在320px，输出80px，而在640px输出160px等。
而采用以上rem的方法，则只需要输出2.5rem就能实现统一，如下表格：
| 设备宽度 | 320px | 360px | 414px | 640px |
| Html字体大小 | 32px | 36px | 41.4px | 64px |
| 实际输出 | 1rem | 1rem | 1rem | 1rem |
| 设计稿缩放大小 | 80px | 90px | 103.5px | 160px |
| 实际输出 | 2.5rem | 2.5rem | 2.5rem | 2.5rem |
以上的2.5rem是怎么得出的呢？
160/64（1rem的基数为64px）=2.5rem;按照官方的说法（750px举例）
Flexible会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：
1a = 7.5px
1rem = 75px
那么我们这个示例的稿子就分成了10a，也就是整个宽度为10rem，对应的font-size为75px：
这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片，其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem。
另外大漠还写了一篇详细的文章：使用Flexible实现手淘H5页面的终端适配 里面介绍了一个如何快速转换rem为px的几种方法，感兴趣的童鞋可以去看看。
也可以看这篇文章：Sass函数功能——rem转px
另外在使用这个来处理自适应的另一个坑就是css sprite，作者的建议是使用svg，或者icon font.或者base64等其他方案。
另外就是在dpr=2时，小图片可能会出现模糊，建议以最大的图片来切图。
字体建议使用px
在作者的观点中，是建议描述性的字体使用px，如果有slogan之类大于48px的，可以使用rem，由于使用rem在iPhone5和iPhone6中字体不同，可能出现13px和15px,点阵字体。
显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是
16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。如此一来，就决定了在制作H5的页面中，
rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。div { width: 1rem; height: 0.4rem; font-size: 12px; // 默认写上dpr为1的fontSize } [data-dpr="2"] div { font-size: 24px; } [data-dpr="3"] div { font-size: 36px; }为了能更好的利于开发，在实际开发中，我们可以定制一个
font-dpr()这样的Sass混合宏：@mixin font-dpr($font-size){ font-size: $font-size; [data-dpr="2"] & { font-size: $font-size * 2; } [data-dpr="3"] & { font-size: $font-size * 3; } }有了这样的混合宏之后，在开发中可以直接这样使用：
@include font-dpr(16px);当然这只是针对于描述性的文本，比如说段落文本。但有的时候文本的字号也需要分场景的，比如在项目中有一个slogan,业务方希望这个slogan能根据不同的终端适配。针对这样的场景，完全可以使用
rem给slogan做计量单位。
DEMO
请用手机扫下面的二维码
更新【2016年01月13日】
首先，由衷的感谢@完颜 帮忙踩了这个坑，回想起ios从7~8，从8~9，都踩过只至少一个坑，真的也是醉了。
手淘这边的flexible方案临时升级如下：
- 针对OS 9_3的UA，做临时处理，强制
dpr为1，即scale也为1，虽然牺牲了这些版本上的高清方案，但是也只能这么处理了 - 这个版本不打算发布到CDN（也不发不到tnpm），所以大家更新的方式，最好手动复制代码内联到
html中，具体代码可以点击这里下载