基於vue-cli配置移動端自適應

目前移動端應該大都是用rem來做自適應布局，下面是關於如何基於vue-cli配置的項目做移動端屏幕適配。

1.安裝lib-flexible

在命令行中輸入並運行：npm i lib-flexible --save

 

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

import 'lib-flexible'

 

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})]

 

修改了vue-loader.conf.js文件我們需要在終端重新輸入並運行npm run dev

 

可以看到的效果

 百分之50也可以自適應

 

百分之75也可以自適應

 

我的main.js文件 

我引用的是Vant UI框架

官網地址 https://youzan.github.io/vant/#/zh-CN/intro

Vant的安裝與使用 https://blog.csdn.net/webfront/article/details/80277844

 

要是沒有看到效果的可以在index.html頁面上的頭部加上一句

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