Vue-cli3.0布局实战篇---移动端适配

Vue-cli3.0布局实战篇---移动端适配

前言：

本文所采用技术栈：vue3+vue-router4+vuex4+vant3，今天我们来一起看下，在使用脚手架3.0开发项目的时候，怎么去解决移动端适配问题，这样做的好处是一次适配，后续的开发过程都可以解决因为元素样式大小带来的布局问题。

没有做适配的时候，px就是像素，不会根据设备的大小去变化，就像下图这样：

1. 安装amfe-flexible

打开项目所在文件夹，输入命令：npm i -S amfe-flexible

2. 打开main.js，引入amfe-flexible

 命令：import  'amfe-flexible'

3.安装postcss-px2rem

命令：npm i postcss-px2rem

4.在package.json配置postcss

命令：

"postcss": {

    "plugins": {

      "autoprefixer": {},

      "postcss-px2rem": {

        "remUnit": 37.5

      }

    }

  }

5.重启项目，完成配置

再次打开项目，看到px已经转换到了rem，如下图：

结语：postcss-px2rem只是一个px转rem的插件，还有其它的插件像postcss-pxtorem，用法上都大同小异，有兴趣的朋友们可以自己去研究下，如果你不想让px转rem，直接用大写的PX，这样就不会被转换了。

最后，放上文章代码的仓库地址，喜欢的点个star。

https://github.com/maxzyt/vue3-mall-page