首先获取根节点
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);
//字体大小自适应-->