移动网页,自适应大小

2023年09月02日 | 分类: js | 评论: 0 | 浏览: 486
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>自适应大小</title>
	<script>
		function scaleWidth() {
			var optimalLineLength = "50em";
			var extraAccounting = "12em";
			var minimumTextHeight = "8px";
			var windowWidth = document.body.clientWidth;
			var optimalSize = windowWidth / (parseInt(optimalLineLength) + parseInt(extraAccounting));
			if (optimalSize >= parseInt(minimumTextHeight)) {
				document.querySelector('html').style.fontSize = optimalSize + "px";
			}
			else {
				document.querySelector('html').style.fontSize = parseInt(minimumTextHeight) + "px";
			}
			return true;
		}
	</script>
</head>
<body onload="scaleWidth();" onresize="scaleWidth();">
	<div style="font-size:2rem">自适应大小</div>
</body>
</html>


顶一下 ▲()
踩一下 ▼()
发表留言
登录后才能发表留言,立即 登录注册
提交 (Ctrl+Enter)
Copyright 2020-2024 xaoi博客 All Rights Reserved.