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

HTML网页中textarea的高度自适应怎么实现方法：

方法步骤：

1、【实例名称】

textarea自适应文字行数

2、【实例描述】

textarea是HTML中的文本元素，可实现文字的多行输入，也可以控制行数和列数。本例学习如何让textarea根据用户的输人文本，自动调整高度和宽度。

3、【实例代码】

<head>

</head>

<body>

<textarea rows=1 name=txt1 cols=27

onpropertychange="this.style.posHeight=this.scrollHeight">

</textarea></body>

</html>

4、【运行效果】

5、【难点剖析】

本例的重点是texlarea元素的“onpropenychange”事件。当文本内容发生变化时会触发此事件。“posHeight”表示文本输入框的高度，“scmllHeight”表示内容的高度。

欢迎分享，转载请注明来源：内存溢出

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