移动端自适应：flexible.js可伸缩布局使用

http://caibaojian.com/flexible-js.html

 

阿里团队开源的一个库。flexible.js，主要是实如今各类不一样的移动端界面实现一稿搞定全部的设备兼容自适应问题。

实现方法：

经过JS来调整html的字体大小，而在页面中的制做稿则统一使用rem这个单位来制做。关键代码以下：

;(function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});
    
    if (metaEl) {
        console.warn('将根据已有的meta标签来设置缩放比例');
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
        }
    }

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

    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }
    

    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }

})(window, window['lib'] || (window['lib'] = {}));

 

从上面的代码，主要是改变了dpx和document的font-size大小。大小为docEl.getBoundingClientRect().width / 10 + 'px';

假设咱们的设计稿宽是640的，则html的字体大小则被设为64px.则至关于1rem=64px.(1rem相对于根节点的字体大小)。

假如一个元素的宽是160px,在平时，咱们能够采用百分比能够作到自适应，假如使用响应式的话，可能须要设置多个，好比在320px，输出80px，而在640px输出160px等。而采用以上的方法，则只须要输出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，<html>对应的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中，具体代码能够点击这里下载