web、移动端的适配插件

“postcss-px-to-viewport”插件可作为前端适配方案之一。

前言

之前做前端适配，要么通过使用css的media媒体查询，要么通过获取可视宽度按照想要的比例设置文档根字体大小。无意间在网上看到一种新的适配插件--postcss-px-to-viewport，就是用viewport（vw）单位，viewport单位越来越受到众多浏览器的支持，postcss-px-to-viewport，将px单位按照相应的配置自动转换成需要的viewport单位，具体用法可参考该postcss-px-to-viewport 文档。

安装

可使用npm、yarn安装：

npm install -D postcss-px-to-viewport

或 yarn add -D postcss-px-to-viewport

使用

在项目的最外层（即配置文件同级目录下）新建.postcssrc.js文件，在.postcssrc.js文件中加入配置语句，.postcssrc.js更新需要重启才会生效，以下为示例：

module.exports = {
    plugins: {
        autoprefixer: {}, // 自动添加相应浏览器前缀，样式兼容，如-webkit-，-moz-等
        "postcss-px-to-viewport": {
            unitToConvert: "px", // (String)需要转换的单位，默认为"px"
            viewportWidth: 750, // (Number)设计稿的视口宽度：可为设计稿的宽度，也可按需自行配置（PC）
            unitPrecision: 6, // (Number)单位转换后保留的精度，即小数点位数
            propList: ["*"], // (Array)指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: "vw", // (String)指定需要转换成的视窗单位，默认vw
            fontViewportUnit: "vw", // (String)指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: ["demo"], // (Array)需要忽略的CSS选择器，不转为视窗单位，使用原有单位，
            minPixelValue: 1, // (Number)设置最小的转换数值，默认为1，只有大于1的值会被转换
            mediaQuery: true, // (Boolean)媒体查询里的单位是否需要转换单位，默认false
            replace: true, // (Boolean)是否直接更换属性值，而不添加备用属性
            exclude: [/node_modules/], // (Array or Regexp)忽略某些文件夹下的文件或特定文件，用正则做目录名匹配
            include: /Ignore.vue/,    //(Array or Regexp)只有匹配到的文件才会被转换，那将只有匹配到的文件才会被转换
            landscape: false, // (Boolean)是否添加根据 landscapeWidth 生成的媒体查询条件
            landscapeUnit: 'vw',    //(String)横屏时使用的单位
            landscapeWidth: 700     //(Number)横屏时使用的视口宽度
        }
    }
};

也可在配置文件中进行配置

vue.config.js

const pxtoviewport = require("postcss-px-to-viewport");
module.exports = {
  css: {
    // 忽略 CSS order 顺序警告
    extract: { ignoreOrder: true },
    // 适配插件
    loaderOptions: {
      postcss: {
        plugins: [
          pxtoviewport({
            // 配置视窗口尺寸
            viewportWidth: 1700,
            unitPrecision: 5,
            viewportUnit: "vw",
            fontViewportUnit: "vw",
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: true,
          }),
        ],
      },
    },
  },
}

注意

使用“postcss-px-to-viewport”插件时，对内联css样式，外联css样式有效，对行内css样式和JavaScript动态设置的样式无效。