首页 > 代码库 > 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。