postcss-px-to-viewport插件教程
简介用途视口单位（Viewport units）示例安装配置参数使用简介
将px单位转换为视口单位的（vw,vh,vmin,vmax）的PostCSS插件
用途
如果你的样式需要根据视口大小来调整宽度，这个脚本可以将你的CSS中的px转化为vw
视口单位（Viewport units）
在PC端，视口指的是在PC端，指的是浏览器的可视区域；
而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
视口单位中的“视口”，PC端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。
根据CSS3规范，视口单位主要包括以下4个：
1.vw：1vw等于视口宽度的1%。2.vh：1vh等于视口高度的1%。3.vmin：选取vw和vh中最小的那个。4.vmax：选取vw和vh中最大的那个。
示例
输入
.class{ width:100px; height:100px;}
输出
.class{ width:31.25vw; height:31.25vw;}
安装
$ npm install postcss-px-to-viewport --save-dev
配置参数
默认参数
{unitToConvert: 'px',viewportWidth: 320,unitPrecision: 5,propList: ['*'],viewportUnit: 'vw',fontViewportUnit: 'vw',selectorBlackList: [],minPixelValue: 1,mediaQuery: false,replace: true,exclude: undefined,include: undefined,landscape: false,landscapeUnit: 'vw',landscapeWidth: 568}
unitToConvert (String) 需要转换的单位，默认为"px"viewportWidth (Number) 设计稿的视口宽度unitPrecision (Number) 单位转换后保留的精度propList (Array) 能转化为vw的属性列表viewportUnit (String) 希望使用的视口单位fontViewportUnit (String) 字体使用的视口单位selectorBlackList (Array) 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位minPixelValue (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换mediaQuery (Boolean) 媒体查询里的单位是否需要转换单位replace (Boolean) 是否直接更换属性值，而不添加备用属性exclude (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 ‘node_modules’ 下的文件landscape (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)landscapeUnit (String) 横屏时使用的单位landscapeWidth (Number) 横屏时使用的视口宽度
使用
在postcss.config.js添加如下配置
module.exports = {plugins: {autoprefixer: {},"postcss-px-to-viewport": {viewportWidth: 375, //视口的宽度，对应的时设计稿的宽度/2，一般为750，对应iPhone6的宽度viewportHeight: 667, //视口的高度，对应的是设计稿的高度（也可以不配置）unitPrecision: 5, //指定‘px’转换为视口单位值的小数位数（很多时候无法整除）小数位为5位viewportUnit: 'vw', //指定需要转换成的视口单位，建议使用vw(宽度)selectorBlankList: ['ignore'], //指定不需要转换的类（class类名，使用ignore，在元素的class里加入ignore，则该元素里的px不会进行转化）minPixelValue: 1, //小于或等于‘1px’不转换为视口单位mediaQuery: false,//允许在媒体查询中转换为‘px’,使用媒体查询，再对一些东西进行配置exclude: [/TabBar/] //不需要转化的组件文件名正则，必须是正则表达式}}}
