VUE Vant框架开发移动端自适应问题处理

Vant组件库内部的组件样式都是以PX单位计算的尺寸。由于手机屏幕尺寸大小不一，所以我们一般在开发web移动端的时候不采用PX像素为单位设置宽高等。

方式一：将px单位转换成rem单位布局

1.下载lib-flexible插件

npm i lib-flexible --save

2.引入lib-flexible

//main.js中引入
import 'lib-flexible/flexible'

3.安装px2rem-loader

npm install px2rem-loader

4.配置px2rem-loader
在build目录中找到uilt.js，在cssLoaders中增加以下代码

const px2remLoader = {
    
    
    loader: 'px2rem-loader',
    options: {
    
    
      remUnit: 37.5 
      // Vant-UI的官方根字体大小是37.5所以这里也设置了37.5。也可以按照实际的设计稿大小设置成75
      // 一般我们拿到的设计稿是750px（二倍图）的。这里设置了37.5后。在写代码的时候也需要按照375px（一倍图）的宽度来写；
      //如：将APP的宽度设置为全屏 #app{width:375px};CSS将会自动转换成rem
    }
  }

同时，在generateLoaders方法中添加px2remLoader

const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

配置完之后：运行npm run dev就可以看到效果了；

按照以上的方式配置完成后，虽然可以实现自适应但会发现在PAD上无法自适应，最高的宽度只能到了750px，导致两边有空白。如果我们开发的是公众号和H5网页一般还是需要根据屏幕宽度进行自适应；

1.首先需要看设计稿是否达到了适应PAD的尺寸。如果UI那边只给了750尺寸宽度的设计稿，那么肯定是需要修改下的；
2.不采用自动px转rem插件；
3.新建JS文件rem.js放到components文件下;

(function (doc, win) {
    
    
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
    
    
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=1024){
    
    
                docEl.style.fontSize = '100px';
            }else{
    
    
                docEl.style.fontSize = 100 * (clientWidth / 1024) + 'px';
                var a =docEl.style.fontSize = 100 * (clientWidth / 1024) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
// 1024代表设计稿的宽度；项目的设计稿宽度是多少 这里就写多少；

4.在main.js中引入

import rem from './components/rem'

5.在index.html中设置meta

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

6.采用rem进行布局；
如设计稿的宽度为1024px。设置成全屏宽；则是 width:10.24rem;

以上就是解决移动端rem自适应问题的方法，大部分项目还是建议采用第一种方法（毕竟自动转）。除非你的项目也必须要求适应pad，在去采用第二种手动转的方法；如果有更好的方法欢迎留言讨论！

VUE Vant框架开发移动端自适应问题处理

Guess you like