h5 移動端適配方案

2. 設定viewport

   打開public\index.html，在html\head結點下加入<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

   

    

    

3. 執行腳本設定rem值

   rem值就是html結點的字體大小，如果html結點font-size=100px，那么1rem=100px。在html/head結點下新建一個<script>結點，並填入如下代碼：如果屏幕寬度大於640，可以認為是PC，一般手機屏幕寬度不可能達到640，pad有可能達到。這里的10.8 = UI設計稿的寬度 / 100，我的UI設計稿寬度是1080的。所以是10.8

   <script>
           let deviceWidth = document.documentElement.clientWidth;
           console.log(deviceWidth);
           if(deviceWidth > 640) deviceWidth = 640;
           document.documentElement.style.fontSize = deviceWidth / 10.8 + 'px';
   </script>

3. css中所有出現px的地方，用rem代替，為了方便，寫一個pxtorem函數，如下：

   $baseFontSize: 108;
   @function px2rem($px){
     @return $px / $baseFontSize * 1rem;
   }

4. 然后css這樣修改即可：

   .register_home {
     height: 100vh;
     background: center/cover no-repeat url("../../assets/img/register/register_home_background.png");
     overflow: hidden;
   ​
     .background_img {
       margin: px2rem(272) auto;
       width: px2rem(972);
       height: px2rem(1580);
       background: center/contain no-repeat url("../../assets/img/register/register_home_foreground.png");
       overflow: hidden;
    }
   }

5. 參考資料 https://www.cnblogs.com/lyzg/p/4877277.html#

6. 參考資料https://www.cnblogs.com/muamaker/p/11202628.html
7. https://www.jianshu.com/p/64877ce6e893 其中有vw布局，可以學習一下。
8. https://www.cnblogs.com/imwtr/p/9648233.html 對細節處理更多一些。