vw (Viewport Width) 是一種長度單位，代表視口寬度的百分比。1vw 等于視口寬度的1%。在網頁設計和前端開發中，vw 單位常用于實現響應式設計和屏幕適配，尤其是針對不同尺寸和分辨率的移動設備。

為什么使用vw適配？

1. 響應式: 使用vw可以確保元素的尺寸隨瀏覽器窗口或設備屏幕的大小變化而按比例調整，實現良好的響應式布局。
2. 簡化計算: 相比于傳統的像素單位，vw讓開發者能夠更直觀地根據視口比例來設定元素尺寸，無需考慮具體像素值。
3. 設計師與開發者對齊: 設計圖上的百分比尺寸可以直接轉換為vw單位，有助于設計與實現的一致性。

如何使用？

基于postcss插件，實現項目vw適配！

安裝

npm install postcss-px-to-viewport --save-dev// 如果報錯,就執行以下代碼安裝
// npm i postcss-px-to-viewport@1.1.1 -D --legacy-peer-depv

根目錄下新建 postcss.config.js文件,填入配置

// postcss.config.js
module.exports = {plugins: [require('postcss-px-to-viewport')({viewportWidth: 375, // 視口寬度，對應設計稿的寬度，一般為設計稿寬度的1/10viewportHeight: 1334, // 視口高度，可選，一般不需要設置unitPrecision: 5, // 單位轉換后的精度，即小數點后的位數viewportUnit: 'vw', // 轉換后的單位selectorBlackList: ['.ignore', '.hairlines'], // 不進行轉換的類名列表minPixelValue: 1, // 小于或等于這個值的px不轉換為vwmediaQuery: false, // 是否在媒體查詢的CSS代碼中也進行轉換，默認falsereplace: true, // 是否直接替換原始的px值，而不是添加備用的vw值exclude: /(node_modules|bower_components)/, // 忽略某些文件夾下的文件include: undefined, // 可以顯式地包含某些文件或文件夾}),],
};

關于viewportWidth建議取設計稿的寬度，一般設計稿是750px，但是我們移動端屏幕一般寬度為375px(以iphone SE為基準)，也就是屏幕實際1px對應設計稿2px，這樣才能分配好設計稿的像素。

更新Vue配置（僅限Vue CLI）

如果使用Vue CLI，可能需要在vue.config.js中添加對PostCSS的配置，確保PostCSS被正確加載。對于Vue CLI 3及以上版本，配置通常是自動檢測的，但如果需要手動配置，可以這樣操作：

// vue.config.js
module.exports = {css: {loaderOptions: {postcss: {plugins: [require('postcss-px-to-viewport')({// 插件的配置選項同上}),],},},},
};