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

Posted 董七

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端使用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>

　　

 

以上是关于移动端使用rem适配手机端 (阿里js文件）的主要内容，如果未能解决你的问题，请参考以下文章

移动端rem字体适配JS

移动端适配

移动端适配（手机端rem布局详解）

js动态适配移动端font-size,单位：rem

rem 移动端适配

移动端根据rem适配时，pc端调试器和手机显示效果不一致问题