700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 根据屏幕大小自适应根字体大小

根据屏幕大小自适应根字体大小

时间:2018-11-10 14:20:01

相关推荐

根据屏幕大小自适应根字体大小

首先获取根节点

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);//字体大小自适应-->

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。