rem解决方案

最新推荐文章于 2024-07-27 10:48:03 发布

xiaocuizao

最新推荐文章于 2024-07-27 10:48:03 发布

阅读量770

点赞数

分类专栏： rem

本文链接：https://blog.csdn.net/xiaocuizao/article/details/99819836

版权

rem 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

通常我们会在src下面创建一个utils文件夹，存放我们自己封装的文件
将下面的代码存放在utils下 rem.js

然后在入口文件内引入 import utils/rem

这样你就会在body标签上可以查看是否引入成功
成功就可以全局使用了

下面是淘宝的解决方案：f’使用淘宝封装库：flexible

/* 
  通过js来动态添加rem 
*/

;(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);
	}
})(375, 750);

网易解决方案

function font () {
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px'
}


font()//加载后就执行一次


window.onresize = font