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