Rem精简版实现自适应-优化flexible.js

之前发了一篇文章:移动端自适应:flexible.js可伸缩布局使用,里面用到了阿里的一个库:lib-flexible.js,里面有一些东西方法和自定义我这里制作的时候是不需要用到的,所以做了一个精简版的,另外还修复了UC浏览器竖屏与横屏转换的BUG。

bug的重现,大家可以扫原来的DEMO,然后再uc浏览器下横屏与竖屏转换,发现代码并没有自适应

DEMO

之前我在“前端开发博客”的微博中也提到Github中有人提出来的修复方案。答案可以点这里去看

已经找到兼容方案,可通过js在页面的head里生成定义了html元素font-size的style元素来解决!
如下:

<style id="rootFontSize">html{font-size: 100px !important;}</style>

注意还加了important来提高权重

我实验了一下,确实可行。所以把原来的那份代码拷过来,顺便简化了代码。

;(function(designWidth, maxWidth) {
	var doc = document,
	win = window,
	docEl = doc.documentElement,
	remStyle = document.createElement("style"),
	tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		maxWidth = maxWidth || 540;
		width>maxWidth && (width=maxWidth);
		var rem = width * 100 / designWidth;
		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
	}

	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}
	//要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
	refreshRem();

	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 = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(640, 640);

使用方法:

可以到我的Github上下载这个项目里的压缩代码flexible.min.js

  

该代码版本区别于手淘的rem换算方法。使用的是1rem=100px的换算。

假如你有一个块是.box{width:120px;height:80px;} 转为rem则为.box{width:1.2rem; height:.8rem;}

里面还有一个基础模板和样式参考。

如果你发现有什么BUG,也欢迎给我提Issue。

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:Rem精简版实现自适应-优化flexible.js ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/simple-flexible.html)

发表评论

请登录后发表评论: