h5中的字体大小自适应；

Posted 2023-05-10

参考技术A 750px是iphone6的物理像素，也叫屏幕分辨率；设计稿中通常750作为宽度；

为了适配不同的像素的机型；我们根据将字体用rem表示，它可以根据机型调整字体大小；

为什么750px的机型设置100px为1rem呢，好算啊。

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

参考技术A 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执行