The project adaptation of the mobile vue has always been a problem, and the implementation is recorded here

Recommended   The postcss PX to viewport plug-in handles it and converts it into vw units

demo   Please poke here   ¥    Integrated shopping mall

demo, please poke here c   vue mobile terminal adaptation perfect solution demo.rar - Internet document resources - CSDN Download

Postcss PX to viewport is a very useful plug-in,

It converts px into viewport unit VW. As we all know, VW is essentially a percentage unit. 100vw is equal to 100%, which is obtained by window.innerWidth

<meta name="viewport" content="width=device-width,initial-scale=1.0">   It can be used by default, and can be modified without setting

This case is implemented in cli3, and others should be the same as before

Introduce in vue project

1. We first install it into the development environment of the project:

 npm i postcss-px-to-viewport -D

  2. Create a new. postcssrc.js file in the project root directory

3. Add the following configuration:

module.exports = {
  plugins: {
    autoprefixer: {}, // It is used to automatically add corresponding prefixes to different browsers, such as - webkit -, - moz -, etc
    "postcss-px-to-viewport": {
      unitToConvert: "px", // Units to convert
      viewportWidth: 750, // Width of UI design
      unitPrecision: 6, // Precision after conversion, i.e. number of decimal places
      propList: ["*"], // Specify the units of css attributes to be converted, * means all units of css attributes are converted
      viewportUnit: "vw", // Specifies the window unit to convert to. The default is vw
      fontViewportUnit: "vw", // Specifies the window unit to which the font needs to be converted. The default is vw
      selectorBlackList: ["wrap"], // Specify a class name that is not converted to a window unit,
      minPixelValue: 1, // The default value is 1. If it is less than or equal to 1px, no conversion will be performed
      mediaQuery: true, // Whether to convert in the css code of media query. The default is false
      replace: true, // Replace attribute value directly after conversion
      exclude: [/node_modules/], // Set to ignore files and use regular to match directory names
      landscape: false // Whether to handle the horizontal screen
    }
  }
};

4. Re run the project and the configuration file will take effect

5. Write a test code to verify:

<template>
  <div class="test-viewport">Test conversion</div>
</template>

<style lang="less" scoped>
.test-viewport {
  width: 750px;
  height: 100px;
  font-size: 40px;
  text-align: center;
  line-height: 100px;
  background: #13b5b1;
}
</style>

6. Open the console and you can see that the conversion has been made

Configuration to note

propList: When we don't want to convert the units of some attributes, we can add them to the back of the array and add them to the front!number,
as propList: ["*","!letter-spacing"],This means: all css The units of attributes are converted,
except letter-spacing of
selectorBlackList: Converted blacklist,
In the blacklist, we can write a string as long as the class name contains this string,
Will not be matched.
such as selectorBlackList: ['wrap'],It means like wrap,my-wrap,wrapper The unit of such a class name,
Will not be converted

Compatible with third-party UI Libraries

When we introduce some third-party libraries, such as vant, the exclude configured above is removed, which means that all contents are vw converted. We will encounter such problems:

Like this TabBar, it becomes very small and flattened.

In fact, the vant official website also provides an adaptation scheme for the viewport. Find a project called vant demo in github, and you can see its configuration as follows:

vant team's is based on the design draft of 375px, and the ideal viewport width is 375px.

So, should we also ask the UI to publish a new version 375px of the design?

Or, let's do a mental calculation in the process of writing, and divide all the marked dimensions by 2?

Let's go back to the webpack itself and take a look at the. postcssrc.js file again. It can expose not only an object, but also a function. No matter what is exposed, it will be read and executed by the massive files configured by us when the webpack runs.

One advantage of exposing functions is that you can get information about the current execution file of the webpack.

Then we can have such an idea: if we read vant related files, the viewportWidth will be set to 375. If it is other files, we will set the viewportWidth according to the width of our UI, that is, 750.

Rewrite the. postcssrc.js file configuration as follows:

const path = require('path');

module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;

  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: designWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false
      }
    }
  }

}

Note: path. Join ('node_modules','vant ') is used here because it is suitable for different operating systems. The result is node under mac_ Modules / vant, and in windows, the result is node_modules\vant

After re running, it is found that not only the units of vant related components are converted to vw, but also their proportions are completely correct.

The above part belongs to the actual integration of Internet collection