前言

vw布局的頁(yè)面是等比改變的,比如我們?cè)谝粋€(gè)750px的屏幕寬度中使用了vw,當(dāng)我們把屏幕寬度改為1920的時(shí)候,網(wǎng)頁(yè)的整個(gè)樣式包括字體都會(huì)等比放大.vw布局我用于大屏監(jiān)控?cái)?shù)據(jù)展示.

下圖是750屏幕寬度下的頁(yè)面

下圖是1920屏幕寬度下的頁(yè)面

pc端配置

1.安裝postcss-px-to-viewport插件,該插件的作用是把項(xiàng)目中style標(biāo)簽內(nèi)的px在編譯后轉(zhuǎn)化為vw.我們?cè)陧?xiàng)目中寫px,在執(zhí)行npm run serve后查看界面會(huì)發(fā)現(xiàn)px已經(jīng)轉(zhuǎn)化為vw了.

注意對(duì)于非style標(biāo)簽的px是無(wú)法轉(zhuǎn)化為vw的

npm install postcss-px-to-viewport -D

postcss-px-to-viewport轉(zhuǎn)化例子:

2.在package.json同級(jí)下新建文件vue.config.js,在vue.config.js中配置如下

module.exports={

css: {

extract:false,//false表示開發(fā)環(huán)境,true表示生成環(huán)境

sourceMap:false,

loaderOptions: {

postcss: {

plugins: [

require("postcss-px-to-viewport")({

unitToConvert:"px", //需要轉(zhuǎn)換的單位，默認(rèn)為"px"

viewportWidth: 1920, //視窗的寬度，對(duì)應(yīng)pc設(shè)計(jì)稿的寬度，一般是1920

viewportHeight: 1080,// 視窗的高度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的高度,我做的是大屏監(jiān)控,高度就是1080

unitPrecision: 3, //單位轉(zhuǎn)換后保留的精度

propList: [ //能轉(zhuǎn)化為vw的屬性列表

"*"],

viewportUnit:"vw", //希望使用的視口單位

fontViewportUnit: "vw", //字體使用的視口單位

selectorBlackList: [], //需要忽略的CSS選擇器，不會(huì)轉(zhuǎn)為視口單位，使用原有的px等單位。

minPixelValue: 1, //設(shè)置最小的轉(zhuǎn)換數(shù)值，如果為1的話，只有大于1的值會(huì)被轉(zhuǎn)換

mediaQuery: false, //媒體查詢里的單位是否需要轉(zhuǎn)換單位

replace: true, //是否直接更換屬性值，而不添加備用屬性

exclude: /(/|\)(node_modules)(/|\)/, //忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件

})

]

}

}

}

}

測(cè)試

dididi

---

dididi2

---

dididi3

data () {return{

}

},

components:{

}

}

font-size: 50px;

}

啟動(dòng)npm run serve在改變窗口大小的時(shí)候,就能看到字體改變了

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。