從零開始在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