h5 移动端适配方案

h5 移动端适配方案

1. 设定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" />

   

2. 执行脚本设定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>

1. css中所有出现px的地方，用rem代替，为了方便，写一个pxtorem函数，如下：

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

2. 然后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;
     }
   }

3. 参考资料 https://www.cnblogs.com/lyzg/p/4877277.html#

4. 参考资料https://www.cnblogs.com/muamaker/p/11202628.html
5. https://www.jianshu.com/p/64877ce6e893 其中有vw布局，可以学习一下。
6. https://www.cnblogs.com/imwtr/p/9648233.html 对细节处理更多一些。