從零開始在vue-cli4配置自適應vw佈局

簡介

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,
    sourceMap: false,
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px",	// 須要轉換的單位，默認爲"px"
            viewportWidth: 1920,   // 視窗的寬度，對應pc設計稿的寬度，通常是1920
            // viewportHeight: 1080,// 視窗的高度，對應的是咱們設計稿的高度
            unitPrecision: 3,		// 單位轉換後保留的精度
            propList: [		// 能轉化爲vw的屬性列表
              "*"
            ],
            viewportUnit: "vw",		// 但願使用的視口單位
            fontViewportUnit: "vw",		// 字體使用的視口單位
            selectorBlackList: [],	// 須要忽略的CSS選擇器，不會轉爲視口單位，使用原有的px等單位。
            minPixelValue: 1,		// 設置最小的轉換數值，若是爲1的話，只有大於1的值會被轉換
            mediaQuery: false,		// 媒體查詢裏的單位是否須要轉換單位
            replace: true,		// 是否直接更換屬性值，而不添加備用屬性
            exclude: /(\/|\\)(node_modules)(\/|\\)/,		// 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
          })
        ]
      }
    }
  },
複製代碼

效果

咱們以字體爲例，一樣能夠看到字體在不一樣分辨率的狀況下是不同大小的

參考資料

vue-cli 中使用 postcss-px-to-viewport 插件實現移動端自適應

Vue(vue4.0)項目中，使用響應式佈局插件postcss-px-to-viewport