簡介

viewportWidth也是vw佈局從配置上來說比rem佈局簡潔了很多，bu需要配置安裝lib，也不需要增加一個rem.js檔案

簡稱拎包使用

安裝包

npm install postcss-px-to-viewport -D

或者

yarn add postcss-px-to-viewport -D

配置移動端

在vue.config.js中找到loaderOptions，如果沒有的話需要在css屬性下增加postcss

css: {
  extract: IS_PROD,sourceMap: false,loaderOptions: {
   postcss: {
    plugins: [
     require("postcss-px-to-viewport")({
      unitToConvert: "px",// 需要轉換的單位，預設為"px"
      viewportWidth: 375,// 視窗的寬度，對應移動端設計稿的寬度，一般是375
      // viewportHeight:667,// 視窗的高度，對應的是我們設計稿的高度
      unitPrecision: 3,// 單位轉換後保留的精度
      propList: [		// 能轉化為vw的屬性列表
       "*"
      ],viewportUnit: "vw",// 希望使用的視口單位
      fontViewportUnit: "vw",// 字型使用的視口單位
      selectorBlackList: [],// 需要忽略的CSS選擇器，不會轉為視口單位，使用原有的px等單位。
      minPixelValue: 1,// 設定最小的轉換數值，如果為1的話，只有大於1的值會被轉換
      mediaQuery: false,// 媒體查詢裡的單位是否需要轉換單位
      replace: true,// 是否直接更換屬性值，而不新增備用屬性
      exclude: /(\/|\\)(node_modules)(\/|\\)/,// 忽略某些資料夾下的檔案或特定檔案，例如 'node_modules' 下的檔案
     })
    ]
   }
  }
 },

效果

不同型號下，我們看到字型大小都會跟著改變

配置pc端

css: {
  extract: IS_PROD,// 需要轉換的單位，預設為"px"
      viewportWidth: 1920,// 視窗的寬度，對應pc設計稿的寬度，一般是1920
      // viewportHeight: 1080,

效果

我們以字型為例，同樣可以看到字型在不同解析度的情況下是不一樣大小的

參考資料

vue-cli 中使用 postcss-px-to-viewport 外掛實現移動端自適應
Vue(vue4.0)專案中，使用響應式佈局外掛postcss-px-to-viewport

到此這篇關於從零開始在vue-cli4配置自適應vw佈局的文章就介紹到這了,更多相關從零開始在vue-cli4配置自適應vw佈局內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！