移动端常用适配方案三

在前面的, 移动端常用适配方案二 有一个弊端那么就是如果有多少套适配窗口就需要编写多少个媒体查询，如果有几百个那么就编写几百个那么不是疯了嘛，那么本文主要介绍的就是更好的解决方案的方式，就是通过 JS 来进行设置, 通过 JS 动态计算当前屏幕每一份大小的好处, 不用写很多的媒体查询, 坏处：切换了屏幕尺寸之后需要刷新界面才有效，而媒体查询如果切换了屏幕的尺寸不需要重新刷新界面，在真实的情况下用户使用的可都是真机，就不会出现不同适配窗口之间的切换问题啦。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>移动端常用适配方案三</title>
    <script>
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
    </script>
    <style type="text/less">
      * {
        margin: 0;
        padding: 0;
      }

      .top {
        position: relative;
      }

      .top > img {
        width: 100%;
        height: auto;
      }

      .top > p {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 80/100rem;
        font-size: 36/100rem;
        color: #fff;
      }

      .middle, .bottom {
        position: relative;
        height: 290/100rem;
      }

      .main {
        border: 1px dashed #0d7efb;
        border-radius: 5/100rem;
        padding: 10/100rem;
        display: inline-block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      .main > img:nth-of-type(1) {
        width: 410/100rem;
        height: 270/100rem;
        vertical-align: bottom;
      }

      .main > img:nth-of-type(2) {
        width: 84/100rem;
        height: 84/100rem;
        vertical-align: bottom;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 60/100rem;
      }

      .bottom {
        margin-top: 35/100rem;
      }
    </style>
    <script src="js/less.js"></script>
</head>
<body>
<div class="top">
    <img src="images/bg.png" alt="">
    <p>实名认证</p>
</div>

<div class="middle">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>

<div class="bottom">
    <div class="main">
        <img src="images/back.png" alt="">
        <img src="images/add.png" alt="">
    </div>
</div>

</body>
</html>

测试效果自行运行即可查看，这里就不在贴各个屏幕的适配效果图了。

posted @ 2022-02-13 22:21  BNTang  阅读(24)  评论(0)  编辑  收藏  举报