先安裝

npm i lib-flexible postcss-px2rem --save

然后再main.js中

import 'lib-flexible'

由于flexible會動態給頁面header中添加標簽，所以務必請把目錄 public/index.html 中的這個meta name=“viewport” 標簽刪除或注釋！！！

配置postcss-px2rem
創建vue.config.js,再文件中寫

css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({// 以設計稿750為例， 750 / 10 = 75remUnit: 75}),]}}},

當然他默認的尺寸可能不滿足我們的需求,可以修改源碼，打開./node_modules/lib-flexible/flexible.js，找到如下片段源碼：

function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem; }

將他修改為你想要的尺寸,例如我們要求最小范圍是1020px，最大為1820px，那么我們要修改的則變為：

function refreshRem(){var width = docEl.getBoundingClientRect().width;if(width / dpr < 1020){width = 1020 * dpr}else if(width / dpr >1820){width = 1820 * dpr}// if (width / dpr > 540) {// width = 540 * dpr;// }var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}

總結

以上是生活随笔為你收集整理的vue-cli3中安装lib-flexible和px2rem的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。