前言
vw布局的頁面是等比改變的,比如我們在一個750px的屏幕寬度中使用了vw,當我們把屏幕寬度改為1920的時候,網頁的整個樣式包括字體都會等比放大.vw布局我用于大屏監控數據展示.
下圖是750屏幕寬度下的頁面
下圖是1920屏幕寬度下的頁面
pc端配置
1.安裝postcss-px-to-viewport插件,該插件的作用是把項目中style標簽內的px在編譯后轉化為vw.我們在項目中寫px,在執行npm run serve后查看界面會發現px已經轉化為vw了.
注意對于非style標簽的px是無法轉化為vw的
npm install postcss-px-to-viewport -D
postcss-px-to-viewport轉化例子:
2.在package.json同級下新建文件vue.config.js,在vue.config.js中配置如下
module.exports={
css: {
extract:false,//false表示開發環境,true表示生成環境
sourceMap:false,
loaderOptions: {
postcss: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert:"px", //需要轉換的單位，默認為"px"
viewportWidth: 1920, //視窗的寬度，對應pc設計稿的寬度，一般是1920
viewportHeight: 1080,// 視窗的高度，對應的是我們設計稿的高度,我做的是大屏監控,高度就是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' 下的文件
})
]
}
}
}
}
測試
dididi2
dididi3
data () {return{
}
},
components:{
}
}
font-size: 50px;
}
啟動npm run serve在改變窗口大小的時候,就能看到字體改變了
)
)
