首先获取根节点
var html = doc.getElementsByTagName("html")[0],
(orientationchange->手机屏幕转屏事件)
(resize->页面大小改变事件)
编写一个函数让根节点字体大小根据屏幕大小自适应
首先获取文档宽度
var clientW = doc.documentElement.clientWidth
因为兼容所以要添加一个|| doc.body.clientWidth;
var clientW = doc.documentElement.clientWidth || doc.body.clientWidth;
如果没有获取到就return
获取到后打印的clientW
if(!clientW) {return;}
如果获取到了就根据你想要的比例计算大小
html.style.fontSize = clientW / 6.4 + "px";win.addEventListener(reEvt, reFontSize);// DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行doc.addEventListener("DOMContentLoaded", reFontSize);
最后附上完整代码
// 字体大小自适应 -->(function(doc, win) {var html = doc.getElementsByTagName("html")[0],// orientationchange->手机屏幕转屏事件// resize->页面大小改变事件(一边pc端有用)reEvt = "orientationchange" in win ? "orientationchange" : "resize",reFontSize = function() {var clientW = doc.documentElement.clientWidth || doc.body.clientWidth;if(!clientW) {return;}html.style.fontSize = clientW / 6.4 + "px";}win.addEventListener(reEvt, reFontSize);// DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行doc.addEventListener("DOMContentLoaded", reFontSize);})(document, window);//字体大小自适应-->