在前端开发中因为有时候需要适配手机而头痛,之前我的解决办法都是media和js一起来适配,但是会写好多好多代码,今天在群里看到有个人发的解决办法很好,我就发出来分享一波
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bank</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/page.css">
</head>
<body>
<div id="app" class="page1">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
<script src="http://cdn.gulugulu.cn/common/js/jquery.js"></script>
<script type="text/javascript">
function fn(){
let oW = document.body.clientWidth
let oH = document.body.clientHeight
let oScale = Math.round((750 / 1334 - oW/oH + oW / 750) * 100 ) + 'px'
//整个文档流里面没有单独设置的字体的默认都是oScale
$('html').css('fontSize',oScale)
}
fn()
$(window).resize(function(event){
fn()
})
// (750/1334 - 当前屏幕宽/当前屏幕高 + 当前屏幕宽/750) *100
// 如果当前屏幕是375*600 =44px
// 如果当前屏幕是375*667 = 50px
// 如果当前屏幕是375*812 = 60px
// 1rem = 16px
// 12px 12/16rem
//14px 14/16rem
</script>
</body>
</html>
*{background-repeat:no-repeat; background-size:100% auto;}
html{font-size:calc(100vw / 750 * 100);}
#app{
height:100vh;
background-image:url(../images/bg.png);
background-size:cover;
text-align:center;
}
#app > *{position:absolute; background:rgba(0,0,0,.6);}
#app .hd{
top:.4rem;
left:.4rem;
width:3rem;
height:.5rem;
}
#app .bd{
left:.4rem;
right:.4rem;
top:50%;
height:11rem;
transform:translateY(-50%);
}
#app .ft{
bottom:.4rem;
right:.4rem;
width:4rem;
height:.5rem;
}
最关键的就是js的那一段代码