Self adaptation is a must for every developer , The former stepped on some pits And a few roads out , I hope these experiences can help you in the process of development !!!

1. Traditional layout => rem
Mode one
const deviceWidth = document.documentElement.clientWidth ||
document.querySelector(‘html’).style.fontSize = deviceWidth / 7.5 + ‘px’;
Mode 2 =
document.documentElement.clientWidth / 7.5 + “px”;
function() { =
document.documentElement.clientWidth / 7.5 + “px”;
// Mode one and mode two The effect is the same

2. I only want to see one unit , That's it => px
Scheme 1 :lib-flexible+postcss-pxtorem
Insufficient :
1. The two plug-ins need to be used together , and rootValue The set value is not easy to understand
2. Font units to layout , Not really
Installation procedure :
lib-flexible Maintenance stopped , Available amfe-flexible replace
1. first , Let's install these two packages
npm install npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev
yarn install yarn add amfe-flexible
yarn add postcss-pxtorem --dev
2. stay main.js Introduced in lib-flexible
import ‘amfe-flexible’
3. to configure postcss-pxtorem
cli2 Configuration of ----- stay .postcss.js In file plugins Next new postcss-pxtorem Configuration of
module.exports = {
“plugins”: {
“postcss-pxtorem”: {
rootValue: 192, // Write according to the size of the design drawing , What is the blueprint 1920, Just write 192
propList: [’’], // Properties to be converted
selectorBlackList: [] // No px Selector for conversion
vue-cli3 collocation method : Add in the root path postcss.config.js file module.exports = {
“plugins”: {
“postcss-pxtorem”: {
rootValue: 192, // Write according to the size of the design drawing , What is the blueprint 1920, Just write 192
propList: [’’], // Properties to be converted
selectorBlackList: [] // No px Selector for conversion

Scheme 2 :viewport==> postcss-px-to-viewport plug-in unit
stay vue Try to introduce it into the project
1. Let's first install it into the development environment of the project :npm i postcss-px-to-viewport -D
2. Add in the project root directory .postcssrc.js file // Add the following configuration :
module.exports = {
plugins: {
autoprefixer: {}, // Used to automatically add the corresponding prefix to different browsers , as -webkit-,-moz- wait
“postcss-px-to-viewport”: {
unitToConvert: “px”, // Unit to convert
viewportWidth: 750, // UI Width of design draft
unitPrecision: 6, // Accuracy after conversion , That is, the number of decimal points
propList: ["*"], // Specifies the name of the transformation css Unit of property ,* For all css All units of the attribute are converted
viewportUnit: “vw”, // Specifies the window unit to be converted to , default vw
fontViewportUnit: “vw”, // Specifies the window units to which the font needs to be converted , default vw
selectorBlackList: [“wrap”], // Specifies the class name that is not converted to a Windows unit ,
minPixelValue: 1, // Default value 1, Less than or equal to 1px No conversion is performed
mediaQuery: true, // Is it in the media css The code is also converted , default false
replace: true, // Do you want to change property values directly after conversion
exclude: [/node_modules/], // Set ignore file , Directory name matching with regularization
landscape: false // Whether to deal with horizontal screen

3. Rerun project , Make profile effective // Let's write a test code to verify it :

Test conversion
4. Open the console , You can see that the conversion has been made
Configuration to pay attention to :
propList: When we don't want to convert the units of some properties , Can be added after the array , And add it in front of it ! number , as propList:
["","!letter-spacing"]*, It means : All css Attribute units are converted , except letter-spacing Of

selectorBlackList: Converted blacklist , In the blacklist, we can write strings , As long as the class name contains this string , It won't be matched . such as selectorBlackList:
[‘wrap’], It means like wrap,my-wrap,wrapper The unit of such a class name , Will not be converted
About compatibility with third parties UI library
of course , When we introduce some third-party libraries , such as vant, It's configured above exclude Remove , Indicates that all the contents are in progress vw transformation , We're going to have problems like this :
It's very small , It's crushed
actually —vant The team is based on 375px I did it with my design draft , The ideal width of the view is 375px.
Solution :

Let's go back webpack itself , Take a second look at this one .postcssrc.js file , It exposes only one object , You can also expose a function , No matter what you expose , stay webpack Runtime , Will be read and executed by our massive files
rewrite .postcssrc.js The file configuration is as follows :
module.exports = ({ file }) => {
const designWidth = file.dirname.includes(‘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

Found after rerun , Not only vant The units of the related components are converted to vw, And the proportion is absolutely right . Hope to help you , At the same time, I wish you a happy journey in the development !!!

©2020 ioDraw All rights reserved
SSM— User module ( two ) Forget the password , Change Password , Get user information One and a half years JAVA Summary of work experience python To solve the problem of dictionary writing list in Vue Common features ( Form operation ) Rare expletives in Lei Jun's press conference : this XXX I'm definitely here to make trouble !PYTHON Summary of final review 2021 Front end interview written questions and answers After the black myth Wukong Another domestic game blown up by foreigners 27 Year old invention SQL in the future , God took him away CLion Novice step on the pit :CMake project is not loaded