postcss 有个 postcss-px-to-viewport 插件可以将 px转换成vw,如果设计稿是750px只需将 viewportwidth=750即可,该插件会将css中的px自动转换成/750后的值
var postcss = require("postcss"); var postPxToVeiwport = require("postcss-px-to-viewport"); var fs = require("fs"); var autoprefixer = require("autoprefixer"); var browserList = [ "> 0.5%", "last 2 versions", "Firefox ESR", "not dead" ] //不指定浏览器的版本, 默认是最近1个版本 > 0.5%, last 2 versions, Firefox ESR, not dead 很多东西都不回转换,比如flex不回转换,默认的版本支持的东西很新 fs.readFile("src/css/test.css",function(error,result){ if(error) { console.log("--------------error--------- "+error.toString()); return; } postcss([autoprefixer({flexbox:true,add:true,remove:true,browsers:browserList}),postPxToVeiwport]).process( result,{from:"src/css/test.css",to:"src/css/test1.css"} ).then(result=>{ if(result) { fs.writeFile("src/css/test1.css",result,function(){}); } if(reslut.map) { fs.writeFile("src/css/testmap.css",function(){}); } }).catch(error=>{}); }) // postPxToVeiwport({ // unitToConvert: 'px', // viewportWidth: 360, // viewportHeight: 720, // not now used; TODO: need for different units and math for different properties // unitPrecision: 5, // viewportUnit: 'vw', // fontViewportUnit: 'vw', // vmin is more suitable. // selectorBlackList: [], // minPixelValue: 1, // mediaQuery: false // })