现有工程项目上加响应式
生活随笔
收集整理的這篇文章主要介紹了
现有工程项目上加响应式
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
現(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)題。
- 上一篇: (四)代码优化 (快来看看怎样写出真正高
- 下一篇: 三、如何手动实现一个微前端框架雏形