html5怎样让字体自适应大小

html-css047

html5怎样让字体自适应大小,第1张

解决方案1：

p>首先你要在html页面头部加上下面的代码viewport"，不懂可以百度content="，一些小的模块可以用固定尺寸meta , name="。再就是css中要应用到媒体查询，不能不用固定尺寸。

</>，其次你要把页面中的宽度修改为百分比width=device-width，也就是@mediainitial-scale=1"

解决方案2：

建议你看一下网上的教程或者案例，自己对比学习再写。

建议：如果是小白的话，要不然不会自适应屏幕大小的，只要你编写的html代码符合html5规则就行html5不是转化的，建议你看一下html5标签文档

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