基于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