postcss-px-to-viewport插件教程和适配问题（移动端和PC端）

简介

将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/]  //不需要转化的组件文件名正则，必须是正则表达式
        }
    }
}