Mobile terminal adaptive everyone must think of REM layout at the first time, but I didn’t understand the rootValue of PostCSS-pxtorem thoroughly (I really spent a long time to understand this attribute, but I still couldn’t understand how to convert it), so I looked up the information. Here’s another mobile adaptation: post-CSs-to-viewPort.
1. Install NPM I postcss-px-to-viewport-d in the development environment of the project
2. Add the. Postcsrc. Js file in the root directory of the project.
const path = require('path'); module.exports = ({ file }) => { const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375-750; Return {plugins: {autoprefixer: {}, // used to automatically add prefixes to different browsers such as -webkit-, -moz-, etc. "postcss-px-to-viewport": {unitToConvert: {plugins: {autoprefixer: {}, // used to automatically add prefixes to different browsers such as -webkit-, -moz-, etc. "postcss-px-to-viewport": {unitToConvert: "Px ", // The unit to convert to viewportWidth: designWidth, // the width of the UI design draft //viewportHeight: 1080, // The height of the window is specified according to the width of the 750 device. Generally, 1334 is specified. UnitPrecision: 6 is optional. ViewportUnit: "vw", // Specify the window unit to convert to, default vw fontViewportUnit: "Vw ", // specify the window unit to convert the font to, default vw selectorBlackList: [".wrap", ".el-], // specify the class name not to convert to the window unit, minPixelValue: MediaQuery: true, // whether the CSS code in the mediaQuery is also converted, the default is false replace: true, // whether to replace the attributes directly after the conversion, // exclude: [], // set ignore file, use re as directory name to match landscape: false // whether to handle landscape case}}}}Copy the code