Solutions to mobile terminal adaptation:

Solution 1: Lib-flexible + PostCSS-pxtorem, these two plug-in collocation is to solve the mobile terminal layout of the wizard, Lib-Flexible is an open source library, used to set font size, while dealing with some window zooms.

Inadequate:

  • The two plug-ins need to be used together, and the rootValue setting is not well understood
  • Rem is a unit relative to the font unit of an HTML element, and it is essentially a font unit, which is not very appropriate for layout

A quote from Github:

Solution 2: ViewPort, postCSS-px-to-viewport is such an excellent plug-in, it solves the pain points mentioned above, but also meets the ideal requirements mentioned above. It converts px to the viewport unit vw, which, as we all know, is essentially a percentage unit, 100vw equals 100%, window.innerwidth

"Postcss-px-to-viewport ": {unitToConvert: "px", // unitportwidth: 750, // UI design width unitPrecision: PropList: ["*"], // Specify the unit of converted CSS properties, * represents the unit of all CSS properties are converted. ViewportUnit: "Vw ", // specify the window unit to be converted to, default vw fontViewportUnit: "vw", // specify the window unit to be converted to, default VW selectorBlackList: ["wrap"], // Specify the name of the class not to be converted to window units, minPixelValue: 1, // Default value: 1, not converted to 1px or less mediaQuery: False replace: true, // Whether to replace the attributes directly after conversion, // exclude: [/node_modules/], // set ignore files, use re to match landscape: false // Whether to handle landscape}Copy the code
  • Configuration items:
  1. PropList: When we do not want to convert units of properties, we can add them to the end of the array and add them to the front! For example, propList: [“*”,”! Letter-spacing “], which means that all CSS properties are converted to property units, except for letter-spacing
  2. SelectorBlackList: converted blacklist. In the blacklist, we can write strings. As long as the class name contains this string, it will not be matched. For example, selectorBlackList: [‘wrap’], which indicates that units with class names such as wrap,my-wrap,wrapper, etc. will not be converted

Compatibility with third-party libraries:

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 } } } }Copy the code

Refer to the article: www.cnblogs.com/zhangnan35/…