动态设置html字号,html动态设置根字体大小（页面字体使用rem单位可根据屏幕大小自适应）...

html动态设置根字体大小(页面字体使用rem单位可根据屏幕大小自适应)

1.新建rem.js文件

(function(doc, win) {

let docEl = doc.documentElement,

resizeEvt ='orientationchange' in window ?'orientationchange' :'resize',

recalc =function() {

let clientWidth = docEl.clientWidth

if ( !clientWidth )return

if ( clientWidth ===320 ) {

docEl.style.fontSize =24 * (clientWidth /320) +'px'

}

else {

docEl.style.fontSize =20 * (clientWidth /320) +'px'

}

}

if ( !doc.addEventListener )return

win.addEventListener(resizeEvt, recalc, false)

doc.addEventListener('DOMContentLoaded', recalc, false)

})(document, window)

2，将文件引入到main.js执行