postcss-px-to-viewport Mobile Adaptation

Previously, when doing mobile projects are using rem to do the adaptation, now basically through the viewport unit to do.postcss-px-to-viewportIt's a PostCSS plugin that converts px units to viewport units (vw, vh, vmin, vmax), it converts px units in your CSS to vw, 1vw equals 1/100 viewport width.

1. Installation

$ npm install postcss-px-to-viewport --save-dev

2. Configuration parameters

In the project root directory, create thefile, add the following configuration.

 = ({ webpack }) => {
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px", // unit to convert to
        viewportWidth: 750, // the width of the UI artwork
        unitPrecision: 6, // Converted precision, i.e. number of decimal places
        propList: ["*"], // Specify the units of the css property to convert, * means all units of the css property will be converted.
        viewportUnit: "vw", // specify the window unit to convert to, defaults to vw
        fontViewportUnit: "vw", // Specifies the viewport unit that the font should be converted to, defaults to vw
        selectorBlackList: [], // Specify the name of the class that will not be converted to windowing units.
        minPixelValue: 1, // Default value is 1, less than or equal to 1px will not be converted.
        mediaQuery: true, // If or not the media query is converted in the css code, default is false.
        // replace: true, // if or not to replace the value of the property after conversion
        exclude: [/node_modules/], // Set files to be ignored, use regular to match directory names.
        landscape: false // Whether to handle landscape cases
      }
    }
  }
}

Start the project, at this point the conversion has already been done automatically and will be based on thein the fileviewportWidthThe value of thepxconvert tovwFor example, if you set the div width to 750px, the conversion is 100vw. At this point, the style is as follows:

importation

.class {
  margin: -10px .5vh;
  padding: 5vmin 9.5px 1px;
  border: 3px solid black;
  border-bottom-width: 1px;
  font-size: 14px;
  line-height: 20px;
}

exports

.class {
  margin: -3.125vw .5vh;
  padding: 5vmin 2.96875vw 1px;
  border: 0.9375vw solid black;
  border-bottom-width: 1px;
  font-size: 4.375vw;
  line-height: 6.25vw;
}

(1). Issue 1 css units of components in vant are not converted

After configuring all of that, starting the project and adding the vant component, I opened it to check it out and found that it was still in px units and had not been converted.

on account ofin the fileexcludeparameter sets the entirenode_modulesfolder are excluded, and the installed plugin will use its default units, which will beexcludechange into[]

(2). Issue 2 Converted vant components are unusually small

At this point the units of the vant component are also converted, but the display will be particularly small.

Through troubleshooting, I found the official demo of vant on github, and found that vant set the viewport width to 375, while we set the width to 750, so the vant component will be half the size of the original width and height after conversion.

So we're going to set the viewport width to 375 when converting to vant component style units, via Baidu (cv engineers), and set theThe configuration is modified as follows:

const path = require("path")
 = ({ webpack }) => {
  const designWidth = (("node_modules", "vant")) ? 375 : 750

  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px", // unit to convert to
        viewportWidth: designWidth, // unitPrecision: 6, // the unit to be converted.
        unitPrecision: 6, // Converted precision, i.e. number of decimal places
        propList: ["*"], // Specify the unit of the css property to convert, * means all the units of the css property are converted.
        viewportUnit: "vw", // specify the window unit to convert to, defaults to vw
        fontViewportUnit: "vw", // Specifies the viewport unit that the font should be converted to, defaults to vw
        selectorBlackList: [], // Specify the name of the class that will not be converted to windowing units.
        minPixelValue: 1, // Default value is 1, less than or equal to 1px will not be converted.
        mediaQuery: true, // If or not the media query is converted in the css code, default is false.
        // replace: true, // if or not the value of the property is replaced after conversion.
        exclude: [], // Set files to be excluded, use regular to match /node_modules/ directory names.
        landscape: false // Whether to handle landscape cases
      }
    }
  }
}

At this point the page is back to normal.

4. In-line style

Subsequent use of vant's image component revealed that passing in the width and height750After that, the image went beyond the page, opened it to check that it was still in px units, not converted to vw, the incoming width and height were added to the in-line style of the parent element of the img tag, created a div and experimented with it.postcss-px-to-viewportDoesn't convert in-line styles, only styles in the unloaded style tag. Added class to the image component and it displays fine.

Passed in using width and height:

Use class to control the style:

So far, it's over.