zl程序教程

您现在的位置是:首页 >  云平台

当前栏目

每次页面大小更改 实时获取屏幕宽度

实时 获取 页面 大小 屏幕 更改 宽度 每次
2023-09-11 14:16:33 时间
	<script> 
		(function () {
			function w() {
				var all = document.documentElement;   //获取html元素
				var test = all.getBoundingClientRect().width;  //获取当前设备的宽度、
				console.log('宽度', test) 
				if (test < 1000) {
					document.querySelector('.aaa').style.display = 'none'
					document.querySelector('.bbb').style.display = 'block'
				} else {
					document.querySelector('.aaa').style.display = 'block'
					document.querySelector('.bbb').style.display = 'none' 
				} 
				rem = test / 18.75;
				all.style.fontSize = rem + 'px'
			}
			w();
			window.addEventListener("resize", function () {
				w()
			}, false)
		})();
	</script>

 

	<script>
		//在iphone6 375宽度中  html是以20px作为基本单位
		(function () {
			function w() {
				var all = document.documentElement;   //获取html元素
				var test = all.getBoundingClientRect().width;  //获取当前设备的宽度、
				console.log(123, test)
				if (test > 750) {
					test = 750;
				}
				rem = test / 18.75;
				console.log(rem)
				all.style.fontSize = rem + 'px'
			}
			w();
			window.addEventListener("resize", function () {
				w()
			}, false)
		})();
	</script>