vue怎麼vw布局好用_從零開始在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-cli4配置自适應vw布局的文章就介紹到這了,更多相關從零開始在vue-cli4配置自适應vw布局内容請搜尋腳本之家以前的文章或繼續浏覽下面的相關文章希望大家以後多多支援腳本之家！