书法字典:https://www.shufadict.com

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 对细节处理更多一些。

posted on 2020-07-05 08:42  翰墨小生  阅读(3424)  评论(0编辑  收藏  举报

导航

书法字典:https://www.shufadict.com