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

最新推荐文章于 2024-01-25 14:25:39 发布

半兽先生

最新推荐文章于 2024-01-25 14:25:39 发布

阅读量550

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_43770056/article/details/127946020

版权

前端专栏收录该内容

66 篇文章 3 订阅

订阅专栏

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