话不多说..
先上代码..
这段代码很简单也很重要哟✌️
这段代码表示了..
当宽度为1920px的时候，1rem = 100px。
然后根据1920 /100 = width / ? px 这个公式来实时计算出此时的1rem = ？px。
这样说可能不是很好理解，
举个例子🌰:
宽度为1920px的时候，1rem = 100px；
我们给 p 设置 font-size：1rem。(即100px)
当屏幕缩小到1000px，此时根据上面的等比公式我们得出当宽度为1000px的时候，
1rem = 1000 * 100 / 1920 = 52px
那么此时的p 的font-size就会是52px。从而实现了随着屏幕大小实时放大缩小字体。
如果觉得有点儿懵的童鞋可以拿纸拿笔出来算一算哦~
这是小学算术题啦 😂
当然咱们也不可能让字一直放大放大放大缩小缩小缩小对不，
应该设置一个最大最小字号。
请认真看这段代码😯
咱们设置屏幕超过2560及以上，就固定1rem = 200px，再大也就这样了。
宽度小于600及以下，就固定1rem = 32px。再小咱也不缩了~ (＾－＾)V
哦对啦~ 😁贴上代码，方便大家 ~ (__) 嘻嘻……
大家可以根据自己需要进行修改，
实测用在移动端也灰常方便~👍
代码复制粘贴自取⤵️：
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth >= 2560){
docEl.style.fontSize = '200px';
}else if(clientWidth <= 600){
docEl.style.fontSize = '32px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
