<!DOCTYPE HTML>
<html>
<head>
<title>大屏测试</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
<style>
html,body{
width:100%;
height:100%;
}
#app{
width:100%;
height:100%;
background:url('./bg.png');
background-size: 100%;
background-repeat: no-repeat;
position:relative;
}
#num{
position: absolute;
left: 41rem;
top: 62rem;
color: #fff;
font-size: 4rem;
}
</style>
</head>
<body>
<div id="app">
<div id="num">1000</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
function rem() {
let designSize = 1920; //1920宽度分辨率
let html = document.body||document.documentElement;
let wW = html.clientWidth
let rem = wW / designSize * 62.5
$('html').css('font-size', rem + '%')
}
$(window).resize(function() {
rem()
})
rem()
</script>
</body>
</html>
