I wrote in vue's html function setRem () { let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; //Detect the screen width of html and body document.documentElement.style.fontSize= htmlWidth/7.5 + 'px'; //Set the font-size to 100px on a 750 screen, so that the converted rem can see at a glance how many px it was before. You can choose the screen size for development, 3.2 with a screen width of 320 is also acceptable. } setRem(); window.onresize = function () { //Browser size changes to trigger the window.onresize function, and then trigger the function setRem() setRem() } - Then configure postcss-pxtorem in .postcssrc.js (.postcssrc.js is a file automatically generated by the scaffolding. After configuration, run npm run dev again): The ones in the red circle need to be configured, and the rest are built-in: 'postcss-pxtorem': { rootValue: 100, //Root element size setting, that is, HTML font-size unitPrecision: 5, //How many decimal places to keep in rem propList: ['*'], //It is a list of properties that will be converted. Here it is set to ['*'] all. If you need to set only the border, you can write ['*', '!border*'] selectorBlackList: ['.radius'], // is an array for filtering CSS selectors. For example, if you set it to ['fs'], then for example, the fs-xl class name, the px style will not be converted. Regular expression writing is also supported here. replace: true, //I really don't know what this is used for. Anyone who knows please tell me mediaQuery: false, //Not valid in media queries (like @media screen) minPixelValue: 12 //Pixels less than 12 will not be converted} After configuration, you can re-run npm run dev 200px width and height 200px becomes 2rem and the configured 100px is the font-size. rootValue is 100 The style of setting the class name to radius is not converted Summarize The above is the mobile adaptation that the editor introduced to you to automatically convert px to rem. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Is the tag li a block-level element?
>>: Apache Calcite code for dialect conversion
1. Demand The local test domain name is the same ...
DOCTYPE DECLARATION At the top of every page you w...
As we all know, SSH is currently the most reliabl...
Today, I fell into the trap again. I have encount...
English: A link tag will automatically complete h...
In MySQL, fields of char, varchar, and text types...
Today I saw a case study on MySQL IN subquery opt...
The offline installation method of MySQL_8.0.2 is...
I don't know if you have noticed when making a...
In web design, it is very important to use an org...
This article shares the specific code of writing ...
Table of contents What is an event A Simple Examp...
Table of contents introduction Install Homebrew I...
In this article, we will learn about the optimiza...
This article records the installation and configu...