移动网页，自适应大小
2023年09月02日 | 分类: js | 评论: 0 | 浏览: 505
<!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)
