前言

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' 下的文件

})

]

}

}

}

}

測試

dididi

---

dididi2

---

dididi3

data () {return{

}

},

components:{

}

}

font-size: 50px;

}

啟動npm run serve在改變窗口大小的時候,就能看到字體改變了

總結

以上是生活随笔為你收集整理的vue怎么vw布局好用_vue cli3项目的pc自适应布局_vw的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。