移动端使用rem适配手机端 (阿里js文件）

1.阿里js文件路径

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

2.文件dom

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="yes" name="apple-mobile-web-app-capable"> 
  <meta content="yes" name="apple-touch-fullscreen"> 
  <meta content="telephone=no,email=no" name="format-detection"> 
  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> 
  <title>签约成功</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html, body{
      width: 100%;
      height: 100%;
    }
    #app{
      margin: 0 auto;
      width: 10rem;
      height: 100%;
      padding-top: 3.8rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
    }
    #app img{
      margin: 0 auto;
      display: block;
      width: 6rem;
      height: 3.21rem;
    }
    #app .title{
      flex: 1;
      padding-top: 1.2rem;
      font-size: 0.58rem;
      font-weight: 500;
      color: #333;
      text-align: center;
    }
    #app .subtitle{
      padding-bottom: 2.97rem;
      font-size: 0.32rem;
      color: #999;
    }
  </style>
</head>
<body>
  <div id="app">
    <img src="./icon.png" alt="">
    <p class="title">签约成功</p>
    <p class="subtitle">签约成功，请返回小程序继续操作。</p>
  </div>
</body>
</html>

　　

 

posted @ 2021-06-11 14:53  董七  阅读(348)  评论(0)    收藏  举报