前端页面一套代码适用不同分辨率
2022-08-17 本文已影响0人
上海_前端_求内推
当页面原型根据1920分辨率制作时，1rem等同于100px，写页面时只需要根据1360-1920其中某一个分辨率制作即可，谷歌浏览器默认字号为12px，需要设置浏览器自定义字号或者使用transform缩放字号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="bg" >
<p style="position:absolute;font-size:0.12rem;left:2.57rem;top:0.85rem">测试</p>
<p style="position:absolute;font-size:0.12rem;left:2.57rem;top:0.98rem">测试2</p>
</div>
<script>
function handleResize() {
var htmlWidth = document.documentElement.clientWidth|| document.body.clientWidth
let htmlDom=document.getElementsByTagName('html')[0]
htmlDom.style.fontSize= 100 / 1920 * htmlWidth + 'px';
}
handleResize();
window.onresize = handleResize;
</script>
<style type="text/css">
.bg{
width:9.24rem;height:6rem;
margin:0 auto;
position:relative;
background-image: url("bg1.png");
background-repeat: no-repeat;
background-size: 100%;
}
</style>
</body>
</html>
