转自:https://blog.csdn.net/qq_42033668/article/details/109717401
分辨率1920*1080,其它分辨率的也可以试试。
第一种方式(类似浏览器Ctrl+鼠标滚轮缩放),目前发现一个缺陷,用到了echarts 会出现鼠标焦点不对应
head 里面加上
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<script>
var tid,
doc=document,
docEl = doc.documentElement;
docEl.style.zoom=docEl.clientWidth / 1920;
addEventListener('resize', function () {
clearTimeout(tid);
tid = setTimeout(function () {
docEl.style.zoom=docEl.clientWidth / 1920;
// window.location.reload();
}, 300);
}, false);
</script>
第二种方式(推荐 虽然改动较大,实实在在自适应缩放)
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<script>
var tid,
doc=document,
docEl = doc.documentElement;
var refreshRem = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth >= 1920) {
docEl.style.fontSize = '10px'; //1rem = 10px
} else {
docEl.style.fontSize = 10 * (clientWidth / 1920) + 'px';
}
};
addEventListener('resize', function () {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
addEventListener('pageshow', function (e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
</script>
然后 css 改用下面的那种单位,上面第二种方法 相当于 1rem=10px
.div{
text-align: center;
height:200px;
line-height: 46px;
}
/*改为下面的*/
.div{
text-align: center;
height:20rem;
line-height: 4.6rem;
}
在线转换 px转rem工具
http://www.ofmonkey.com/