监听屏幕大小变化

时间:2025-04-06 20:43:24

首先要明确一点就是再做响应式布局的时候,原理基本上都是通过rem来实现的。

// 监听手机窗口变化,重新设置
window.addEventListener('resize', init)
//定义函数
function init() {
	document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
}
//原理:通过addEventListener()监听屏幕大小的变化动态的更改font-size的值。

监听手机旋转的时机

// 监听手机旋转的事件的时机
window.addEventListener('orientationchange', init)
function init() {
	document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
}