作為一名前端開發，在做移動端適配時rem、vw是我們經常用到的單位，但是我們在實際開發過程中需要將設計稿上的px轉換成rem，如果手動去計算，將是一個很耗時、費力的過程。這是就需要一個工具可以幫我們自動將px轉成rem、vw。

開始之前，我們先來了解一個概念【PostCSS】

PostCSS是一個用 JavaScript 工具和插件轉換 CSS 代碼的工具，類似babel對js的處理。常見的功能如：

1 . 使用下一代css語法(cssnext)

2 . 自動補全瀏覽器前綴(autoprefixer)

3 . 自動把px代為轉換成rem/vw(postcss-pxtorem/postcss-px-to-viewport)

4 . css代碼壓縮等等

PostCSS 只是一個工具，本身不會對css一頓操作，一般不單獨使用，而是與已有的構建工具進行集成，通過插件實現功能。PostCSS 與主流的構建工具，如 Webpack、Grunt 和 Gulp 都可以進行集成。完成集成之后，選擇滿足功能需求的 PostCSS 插件并進行配置。

Webpack 中使用 PostCSS 插件示例：

postcss-loader 用來對.css 文件進行處理，并添加在 style-loader 和 css-loader 之后。通過一個額外的 postcss 方法來返回所需要使用的 PostCSS 插件。require('autoprefixer') 的作用是加載 Autoprefixer 插件。

言歸正傳，接下來我們看一下如果使用PostCSS把px自動轉成rem、vw

postcss-pxtorem

功能：把px轉換成rem

安裝：npm install postcss-pxtorem --save-dev

配置項：

'postcss-pxtorem':{

rootValue:100,// html節點設的font-size大小，由于chrome最小12px，所以基值要設置大寫

unitPrecision:5,// 轉rem精確到小數點多少位

propList:['font','font-size','line-height','letter-spacing'],// 指定轉換成rem的屬性，支持 * ！

selectorBlackList:[],// str或reg ，指定不轉換的選擇器，str時包含字段即匹配

replace:true,

mediaQuery:false,// 媒體查詢內的px是否轉換minPixelValue:0// 小于指定數值的px不轉換

}

postcss-px-to-viewport

之前做移動端適配時，基本上是采用rem方案。但隨著viewport越來越被大家熟悉，我們似乎發現了一種更好的方案。

功能：將px單位自動轉換成viewport單位

安裝：npm install postcss-px-to-viewport --save-dev

配置項：

'postcss-px-to-viewport': {

unitToConvert:'px'， //要轉換的單位，默認是'px'

viewportWidth: 750,? // 視窗的寬度，對應的是我們設計稿的寬度，一般是750，默認是320

viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，一般指定1334，也可以不配置

unitPrecision: 3,? ? // 指定`px`轉換為視窗單位值的小數位數，默認是5

propList: ['*'],? ? //指定可以轉換的css屬性，默認是['*']，代表全部屬性進行轉換

viewportUnit: "vw",? //指定需要轉換成的視窗單位，建議使用vw

fontViewportUnit: 'vw',? ? ?//指定字體需要轉換成的視窗單位，默認vw

selectorBlackList: ['.ignore'],// 指定不轉換為視窗單位的類，可以自定義，可以無限添加，建議定義一至兩個通用的類名

minPixelValue: 1,? ? // 小于或等于`1px`不轉換為視窗單位，你也可以設置為你想要的值

mediaQuery: false,? ? ?// 允許在媒體查詢中轉換`px`

replace: true,

exclude: [],? ?//設置忽略文件，如node_modules

}

總結

以上是生活随笔為你收集整理的vscode怎么自动将px转换成vw_基于react/vue移动端适配之px自动转rem、vw的全部內容，希望文章能夠幫你解決所遇到的問題。

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