首页 > 代码库 > jcFlexible.js的小Demo

jcFlexible.js的小Demo

;(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 zoom(rem, width){        var rate = rem/12;//0.625        var inRate = 12/rem;//16        var oFlexContainer = document.getElementById(flexContainer);        oFlexContainer.style.webkitTransform = scale(+rate+);        var height = oFlexContainer.offsetHeight;        oFlexContainer.style.width = width*inRate+px;        oFlexContainer.style.fontSize = 168+px;        oFlexContainer.style.marginLeft = -(1-rate)/2*(width*inRate) + px;        oFlexContainer.style.marginTop = -(1-rate)/2*height + px;        // console.log(height)        // console.log(width*inRate)    }    function refreshRem(){        var width = docEl.getBoundingClientRect().width;        if (width / dpr > 540) {            width = 540 * dpr;        }        var rem = width / 750;        // console.log(width)        if(document.getElementById(flexContainer)){            var height = document.getElementById(flexContainer).getBoundingClientRect().height;            if(rem < 12){                zoom(rem, width, height)            }        }else{            console.warn(warn:Please write ID elements for flexContainer for container!);        }                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;    } })(typeof window !== "undefined" ? window : this, window[lib] || (window[lib] = {}));

使用文档:
jcFlexible是根据手淘前端团队的flexible框架改写的一套框架,实现了不需要less编译的一套移动端样式的适配
使用须知:
1.需要引入jcFlexible.js
2.创建一个id为flexContainer的div作为container
3.所有dom元素都要写在container里面
4.所有元素都用rem代替px(以设计图为准:例如设计图为750px,一个div标注200px,则设置css为200rem)
5.可根据dpr来适配不同物理像素图片使用如下
[data-dpr="1"] .selector{

}
6.因为对元素进行了特殊处理,项目中不能用px,像素的大小和rem转化手册:
10px = 120rem
12px = 144rem
14px = 168rem
16px = 192rem
18px = 216rem
20px = 240rem
22px = 265rem
24px = 289rem
26px = 313rem
正常大小约为1px = 12rem,精准几乎可以忽略不计

jcFlexible.js的小Demo