現(xiàn)有工程項(xiàng)目上加響應(yīng)式

背景：最近在現(xiàn)有項(xiàng)目上開(kāi)發(fā)導(dǎo)航頁(yè)面，按照設(shè)計(jì)稿1920*1080實(shí)現(xiàn)的效果偏大很多，所以想加響應(yīng)式
加完后發(fā)現(xiàn)其他很多頁(yè)面有問(wèn)題，因?yàn)檫@個(gè)項(xiàng)目已開(kāi)發(fā)很久，一開(kāi)始沒(méi)加響應(yīng)式，所以需要調(diào)整的內(nèi)容很多
為了兼容舊的已開(kāi)發(fā)的頁(yè)面，考慮使用postcss-px-to-viewport的exclude進(jìn)行過(guò)濾文件，實(shí)現(xiàn)以.vp.vue、.vp.less的文件才進(jìn)行轉(zhuǎn)換px單位，后續(xù)新開(kāi)發(fā)的頁(yè)面需要響應(yīng)式文件名以.vp.vue、.vp.less結(jié)尾
配置如下

// postcss.config.js module.exports = {plugins: {"postcss-px-to-viewport": {unitToConvert: 'px',viewportWidth: 1920, // 視窗的寬度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的寬度，一般是750viewportHeight: 1080, // 視窗的高度，根據(jù)750設(shè)備的寬度來(lái)指定，一般指定1334，也可以不配置unitPrecision: 3, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)viewportUnit: "vw", // 指定需要轉(zhuǎn)換成的視窗單位，建議使用vwminPixelValue: 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位，你也可以設(shè)置為你想要的值mediaQuery: false, // 允許在媒體查詢中轉(zhuǎn)換`px`landscapeUnit: 'vh', // 橫屏?xí)r使用的單位landscapeWidth: 1334, // 橫屏?xí)r使用的視口寬度exclude: [/^.*(?<!^vp|\.vp)\.vue$/, /^.*(?<!^vp|\.vp)\.less$/, /src\/assets\/less/, /node_modules/]}} }

總結(jié)

以上是生活随笔為你收集整理的现有工程项目上加响应式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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