前端中适配各种手机模式的一种解决办法

最新推荐文章于 2024-05-28 01:18:01 发布

佛系孤单

最新推荐文章于 2024-05-28 01:18:01 发布

阅读量1.8k

点赞数

分类专栏： web前端文章标签：适配手机尺寸

本文链接：https://blog.csdn.net/qq_43427385/article/details/102722475

版权

web前端专栏收录该内容

49 篇文章 1 订阅

订阅专栏

在前端开发中因为有时候需要适配手机而头痛，之前我的解决办法都是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的那一段代码

佛系孤单

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
前端中适配各种手机模式的一种解决办法

在前端开发中因为有时候需要适配手机而头痛，之前我的解决办法都是media和js一起来适配，但是会写好多好多代码，今天在群里看到有个人发的解决办法很好，我就发出来分享一波<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" ...
复制链接

扫一扫