Web and mobile adaptation plug-ins

The "postcss-px-to-viewport" plugin can be used as one of the front-end adaptation solutions.

foreword

Before doing front-end adaptation, either by using css media media query, or by obtaining the visual width to set the document root font size according to the desired ratio. I accidentally saw a new adapter plug-in on the Internet -- postcss-px-to-viewport , which uses the viewport (vw) unit. The viewport unit is more and more supported by many browsers. postcss-px-to-viewport , to automatically convert the px unit into the required viewport unit according to the corresponding configuration. For specific usage, please refer to the postcss-px-to-viewport document .

Install

You can use npm and yarn to install:

npm install -D postcss-px-to-viewport

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

use

Create a new .postcssrc.js file at the outermost layer of the project (that is, under the same directory as the configuration file), and add configuration statements in the .postcssrc.js file. The update of .postcssrc.js will take effect only after restarting. The following is an example:

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)横屏时使用的视口宽度
        }
    }
};

It can also be configured in the configuration file

view.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,
          }),
        ],
      },
    },
  },
}

Notice

When using the "postcss-px-to-viewport" plugin, it is valid for inline css styles and outline css styles, but invalid for inline css styles and styles dynamically set by JavaScript.