移动端常用适配方案三

原创

一个爱听音乐的程序员 2022-02-13 22:21:00 ©著作权

文章标签 移动Web开发+项目实战 html 媒体查询移动端 文章分类 运维

©著作权归作者所有：来自51CTO博客作者一个爱听音乐的程序员的原创作品，请联系作者获取转载授权，否则将追究法律责任

在前面的, 移动端常用适配方案二有一个弊端那么就是如果有多少套适配窗口就需要编写多少个媒体查询，如果有几百个那么就编写几百个那么不是疯了嘛，那么本文主要介绍的就是更好的解决方案的方式，就是通过 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>