作為一名前端開發(fā)，在做移動(dòng)端適配時(shí)rem、vw是我們經(jīng)常用到的單位，但是我們在實(shí)際開發(fā)過程中需要將設(shè)計(jì)稿上的px轉(zhuǎn)換成rem，如果手動(dòng)去計(jì)算，將是一個(gè)很耗時(shí)、費(fèi)力的過程。這是就需要一個(gè)工具可以幫我們自動(dòng)將px轉(zhuǎn)成rem、vw。

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

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

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

2 . 自動(dòng)補(bǔ)全瀏覽器前綴(autoprefixer)

3 . 自動(dòng)把px代為轉(zhuǎn)換成rem/vw(postcss-pxtorem/postcss-px-to-viewport)

4 . css代碼壓縮等等

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

Webpack 中使用 PostCSS 插件示例：

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

言歸正傳，接下來我們看一下如果使用PostCSS把px自動(dòng)轉(zhuǎn)成rem、vw

postcss-pxtorem

功能：把px轉(zhuǎn)換成rem

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

配置項(xiàng)：

'postcss-pxtorem':{

rootValue:100,// html節(jié)點(diǎn)設(shè)的font-size大小，由于chrome最小12px，所以基值要設(shè)置大寫

unitPrecision:5,// 轉(zhuǎn)rem精確到小數(shù)點(diǎn)多少位

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

selectorBlackList:[],// str或reg ，指定不轉(zhuǎn)換的選擇器，str時(shí)包含字段即匹配

replace:true,

mediaQuery:false,// 媒體查詢內(nèi)的px是否轉(zhuǎn)換minPixelValue:0// 小于指定數(shù)值的px不轉(zhuǎn)換

}

postcss-px-to-viewport

之前做移動(dòng)端適配時(shí)，基本上是采用rem方案。但隨著viewport越來越被大家熟悉，我們似乎發(fā)現(xiàn)了一種更好的方案。

功能：將px單位自動(dòng)轉(zhuǎn)換成viewport單位

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

配置項(xiàng)：

'postcss-px-to-viewport': {

unitToConvert:'px'， //要轉(zhuǎn)換的單位，默認(rèn)是'px'

viewportWidth: 750,? // 視窗的寬度，對應(yīng)的是我們設(shè)計(jì)稿的寬度，一般是750，默認(rèn)是320

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

unitPrecision: 3,? ? // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)，默認(rèn)是5

propList: ['*'],? ? //指定可以轉(zhuǎn)換的css屬性，默認(rèn)是['*']，代表全部屬性進(jìn)行轉(zhuǎn)換

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

fontViewportUnit: 'vw',? ? ?//指定字體需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw

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

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

mediaQuery: false,? ? ?// 允許在媒體查詢中轉(zhuǎn)換`px`

replace: true,

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

}

總結(jié)

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

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