<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
<title>提示信息</title>
<style type="text/css">
#tip {
color: #8492A6;
font-size: 2rem;
font-weight: 700;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
word-break: break-all;
width: 80%;
text-align: center;
}
</style>
</head>
<body>
<div id="tip"></div>
<script>
var docEl = document.documentElement;
// 判断当前手机移动端屏幕是否翻转 如果翻转为true 赋值 "orientationchange"
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var recalc = () => {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//如果屏幕大于750(750是根据效果图设置的,具体数值参考效果图),clientWidth=750,防止font-size会超过100px
if (clientWidth > 750) clientWidth = 750;
//设置根元素font-size大小
docEl.style.fontSize = clientWidth / 750 * 16 + 'px';
};
//屏幕大小改变,或者横竖屏切换时,触发函数
window.addEventListener(resizeEvt, recalc, false);
//文档加载完成时,触发函数
document.addEventListener('DOMContentLoaded', recalc, false);
// 设置错误信息
var dom = document.getElementById('tip');
var errorReg = new RegExp("[\?\&]" + 'tip' + "=([^\&]+)", "i");
var r = window.location.search.match(errorReg);
dom.innerHTML = decodeURI((r || [])[1]) + "<br>";
</script>
</body>
</html>
html移动端展示文字自适应
最新推荐文章于 2024-06-20 09:09:51 发布