現有工程項目上加響應式

背景：最近在現有項目上開發導航頁面，按照設計稿1920*1080實現的效果偏大很多，所以想加響應式
加完后發現其他很多頁面有問題，因為這個項目已開發很久，一開始沒加響應式，所以需要調整的內容很多
為了兼容舊的已開發的頁面，考慮使用postcss-px-to-viewport的exclude進行過濾文件，實現以.vp.vue、.vp.less的文件才進行轉換px單位，后續新開發的頁面需要響應式文件名以.vp.vue、.vp.less結尾
配置如下

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

總結

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

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