html缩放页⾯样式不乱（动态设置rem的跟字体⼤⼩rem布局实
现）
主要核⼼代码（通过动态获取浏览器窗⼝宽度给html设置font-size，然后使⽤rem布局实现缩放页⾯样式不乱掉）:
<script>
;(function(win) {
var tid;
function refreshRem() {
let designSize = 1920; // 设计图尺⼨
let html = document.documentElement;
let wW = html.clientWidth;// 窗⼝宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
})(window);
</script>
截不到浏览器的缩放⼤⼩⼿动输⼤⼩吧
放到最⼩25%：
放到最⼤500%：
先上列⼦：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Document</title>
<style>
body, html {
margin: 0px;
}
.wenzi {
margin: 0 auto;
padding: 0.2rem;
width: 3rem;
font-size: 0.16rem;
box-sizing: border-box;
border: 0.03rem solid #61a4f1;
text-align: center;
}
.wenzi img {
width: 1rem;
margin: 0 auto;
}
</style>
</head>
<body>
<div class='wenzi'>
<p>⽂字⽂字⽂字⽂字⽂字⽂字⽂字</p>
<img src="./东⽅明珠.png" alt="">
<img src="./东⽅明珠.png" alt="">
</div>设置手机主题字体样式的软件
</body>
<script src="cdn.bootcdn/ajax/libs/jquery/3.5.1/jquery.js"></script> <script>
;(function(win) {
var tid;
function refreshRem() {
let designSize = 1920; // 设计图尺⼨
let html = document.documentElement;
let wW = html.clientWidth;// 窗⼝宽度
let rem = wW * 100 / designSize;
document.documentElement.style.fontSize = rem + 'px';
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
})(window);
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。