今天就跟大家聊聊有關怎么在vue項目中使用rem布局，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

1、npm i amfe-flexible

2、import ‘amfe-flexible‘

然后再，安裝postcss-px2rem插件

npm i postcss-px2rem

在package.json中配置

"postcss": {
  "plugins": {
   "autoprefixer": {},
   "postcss-px2rem": {
    "remUnit": 26.7
   }
  }
 }

在vue項目中使用rem布局簡易教程

rem布局由于其根據屏幕寬度的改變修改相應的rem與px的轉換比例，這樣非常適合移動端的項目。

在不同的分辨率下，都會有較好的顯示效果。

在使用rem布局的時候需要引入flexible.js。

js會根據屏幕的寬度計算html的根字體大小

在vue項目中只需要安裝raziel-flex模塊引用就行

安裝方法 

npm install raziel-flex

引用方法（在main.js中引用）

import flex from 'raziel-flex'
 
flex(600); //傳入值為頁面變化大寬（px）

引用時會需要傳入一個參數，布局變化的大寬，當大于這個值時模塊便不再修改html根字體的大小。

模塊修改的根字體的大小等于屏幕寬度除以10；

vacode編輯器安裝remcss插件使用時更方便。

看完上述內容，你們對怎么在vue項目中使用rem布局有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創(chuàng)新互聯成都網站設計公司行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。