使用
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<script src="rem.js"></script>
</head>
<body>
<div style="font-size: 0.4rem;">
速度快飞机喀什酱豆腐
</div>
</body>
</html>
rem.js
文件1：rem.js
//网易rem
!
function(win, lib) {
var flexible = lib.flexible || (lib.flexible = {});
function a() {
if (parseInt(document.documentElement.clientWidth) > 720) {
document.documentElement.style.fontSize = 720 / 7.5 + "px";
} else {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + "px";
}
}
var b = null;
flexible.dpr = 1;
flexible.rem = 100;
flexible.rem2px = function(d) {
var val = parseFloat(d * 75 / 100) * 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;
}
win.addEventListener("resize",
function() {
clearTimeout(b);
b = setTimeout(a, 300);
},
!1);
a();
} (window, window['lib'] || (window['lib'] = {}));
// (function() {
// if (typeof window.WeixinJSBridge == "object" && typeof window.WeixinJSBridge.invoke == "function") {
// handleFontSize();
// } else {
// document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
// }
// function handleFontSize() {
// window.WeixinJSBridge.invoke('setFontSizeCallback', {
// 'fontSize': 0
// });
// window.WeixinJSBridge.on('menu:setfont',
// function() {
// window.WeixinJSBridge.invoke('setFontSizeCallback', {
// 'fontSize': 0
// });
// });
// }
// })();
或者
文件2：rem.js
//哔哩哔哩老师使用的
;(function(win){
var doc=win.document;
var docEl=doc.documentElement;
var tid;
function refreshRem(){
var width=docEl.getBoundingClientRect().width;
if(width>640){// 最大宽度
width=640;
}
//设计1rem，等于设计稿当中的100px的值；
//这样rem的值就出来了
var rem=width/6.4;
docEl.style.fontSize=rem+'px';
}
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);
refreshRem();
})(window);
网友评论