這篇文章主要講解了vue-cli4如何實現(xiàn)配置自適應vw布局，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
10余年建站經驗， 成都網站設計、網站制作客戶的見證與正確選擇。創(chuàng)新互聯(lián)公司提供完善的營銷型網頁建站明細報價表。后期開發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。
簡介
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, // 設置最小的轉換數(shù)值，如果為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, // 設置最小的轉換數(shù)值，如果為1的話，只有大于1的值會被轉換
mediaQuery: false, // 媒體查詢里的單位是否需要轉換單位
replace: true, // 是否直接更換屬性值，而不添加備用屬性
exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
})
]
}
}
},效果
我們以字體為例，同樣可以看到字體在不同分辨率的情況下是不一樣大小的
看完上述內容，是不是對vue-cli4如何實現(xiàn)配置自適應vw布局有進一步的了解，如果還想學習更多內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
