rem

104 阅读1分钟
#div1{ width: 5rem; height: 5rem; background: skyblue; font-size: 1rem; }
	 案例1:有一个盒子 宽高相等 是屏幕宽度的一半;里面字体高度占盒子的33.33% 
	 -->
	 <div id="div1">
	 	helloWord
	 </div>
	 <script type="text/javascript">
		 window.onresize= ()=>{
			 setRem()
		 }
		setRem = function(){
			// 动态修改html字号
			let windowWidth = window.innerWidth
			let danwei = windowWidth/10
			// 找到HTML标签
			let html = document.querySelector('html')
			html.style.fontSize = danwei + 'px'
		}
		setRem()
		 
	 </script>
</body>