基于vue-cli配置移动端自适应

目前移动端应该大都是用rem来做自适应布局，下面是关于如何基于vue-cli配置的项目做移动端屏幕适配。

1.安装lib-flexible

在命令行中输入并运行：npm i lib-flexible --save

 

2.在项目入口文件main.js中引入lib-flexible

import 'lib-flexible'

 

这个时候我们可以npm run dev看一下，已经有了效果。

 

但是这不是我们最终想要的，到这一步意味着我们还是需要根据UI效果图将px转成rem，这样的计算实在是太繁琐，之前本人的做法是通过sass写一个方法将px转rem，这样一来我需要将每一个页面、组件都引入这个sass文件或者每一个页面、组件都加上这一个方法，问题是解决了但是不够优雅，好在网上的大神很多。在github上看到了https://github.com/songsiqi/px2rem-postcss

3.安装postcss-loader、postcss-px2rem

在命令行中输入并运行：npm install postcss-loader postcss-px2rem --save

 

注：我用的是cnpm是因为安装了淘宝镜像，没有安装淘宝镜像就是npm

4.修改项目build文件夹下的vue-loader.conf.js文件

在module.exports中加入postcss:[require('postcss-px2rem')({'remUnit':75,'baseDpr':2})]

 

因为是以750px的UI设计图为标准，所以remUnit的值为75。

修改了vue-loader.conf.js文件我们需要在终端重新输入并运行npm run dev

最终如图结果：

 

原文：https://blog.csdn.net/ly272864318/article/details/80100367