從零開始在vue-cli4配置自適應(yīng)vw布局的實現(xiàn)
簡介
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", // 需要轉(zhuǎn)換的單位,默認(rèn)為"px" viewportWidth: 375, // 視窗的寬度,對應(yīng)移動端設(shè)計稿的寬度,一般是375 // viewportHeight:667,// 視窗的高度,對應(yīng)的是我們設(shè)計稿的高度 unitPrecision: 3, // 單位轉(zhuǎn)換后保留的精度 propList: [ // 能轉(zhuǎn)化為vw的屬性列表 "*" ], viewportUnit: "vw", // 希望使用的視口單位 fontViewportUnit: "vw", // 字體使用的視口單位 selectorBlackList: [], // 需要忽略的CSS選擇器,不會轉(zhuǎn)為視口單位,使用原有的px等單位。 minPixelValue: 1, // 設(shè)置最小的轉(zhuǎn)換數(shù)值,如果為1的話,只有大于1的值會被轉(zhuǎn)換 mediaQuery: false, // 媒體查詢里的單位是否需要轉(zhuǎn)換單位 replace: true, // 是否直接更換屬性值,而不添加備用屬性 exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夾下的文件或特定文件,例如 'node_modules' 下的文件 }) ] } } },
效果
不同型號下,我們看到字體大小都會跟著改變
配置pc端
css: { extract: IS_PROD, sourceMap: false, loaderOptions: { postcss: { plugins: [ require("postcss-px-to-viewport")({ unitToConvert: "px", // 需要轉(zhuǎn)換的單位,默認(rèn)為"px" viewportWidth: 1920, // 視窗的寬度,對應(yīng)pc設(shè)計稿的寬度,一般是1920 // viewportHeight: 1080,// 視窗的高度,對應(yīng)的是我們設(shè)計稿的高度 unitPrecision: 3, // 單位轉(zhuǎn)換后保留的精度 propList: [ // 能轉(zhuǎn)化為vw的屬性列表 "*" ], viewportUnit: "vw", // 希望使用的視口單位 fontViewportUnit: "vw", // 字體使用的視口單位 selectorBlackList: [], // 需要忽略的CSS選擇器,不會轉(zhuǎn)為視口單位,使用原有的px等單位。 minPixelValue: 1, // 設(shè)置最小的轉(zhuǎn)換數(shù)值,如果為1的話,只有大于1的值會被轉(zhuǎn)換 mediaQuery: false, // 媒體查詢里的單位是否需要轉(zhuǎn)換單位 replace: true, // 是否直接更換屬性值,而不添加備用屬性 exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夾下的文件或特定文件,例如 'node_modules' 下的文件 }) ] } } },
效果
我們以字體為例,同樣可以看到字體在不同分辨率的情況下是不一樣大小的
參考資料
vue-cli 中使用 postcss-px-to-viewport 插件實現(xiàn)移動端自適應(yīng)
Vue(vue4.0)項目中,使用響應(yīng)式布局插件postcss-px-to-viewport
到此這篇關(guān)于從零開始在vue-cli4配置自適應(yīng)vw布局的文章就介紹到這了,更多相關(guān)從零開始在vue-cli4配置自適應(yīng)vw布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中實現(xiàn)拖動調(diào)整左右兩側(cè)div的寬度的示例代碼
這篇文章主要介紹了vue中實現(xiàn)拖動調(diào)整左右兩側(cè)div的寬度的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07vue學(xué)習(xí)筆記之過濾器的基本使用方法實例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之過濾器的基本使用方法,結(jié)合實例形式分析了vue.js過濾器的基本功能、用法與操作注意事項,需要的朋友可以參考下2020-02-02