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

html-css08

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

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执行

手机字体大小选择自适应是一个不错的选择，它可以根据手机屏幕的大小自动调整字体大小，使得文字更加清晰，更容易阅读。另外，最少200字最多500字的字数要求也是为了让文章更加简洁，更容易被读者接受。回答您的问题，我认为手机字体大小选择自适应是一个不错的选择，可以让文字更加清晰，更容易被读者接受。