Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to replace px with rem in vue project". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to replace px with rem in vue project".

Tools

Vue-cli: use scaffolding to build vue front-end projects

Postcss: it's a tool that postcss uses the js plugin to help you change the css style. For example, here, replace the 16px in your file with 1rem (if the root size defaults to 16px); so you don't have to do it yourself!

Cssrem: mainly to help you convert px (UI design to px on the design draft) into the corresponding rem

Then: use js code to dynamically calculate the font size that the root directory should have, anyway, it is a piece of js code to dynamically obtain the screen width.

Install the plug-in

Npm i postcss,postcss-pxtorem,postcss-loader,postcss-import,postcss-url

Then add it to the index.html

Add the .postcssrc.js file to the project root

Module.exports = {"plugins": {"postcss-import": {}, / / for @ import to import css file "postcss-url": {}, / / path to import css file or node_modules file "postcss-aspect-ratio-mini": {}, / / to process element container aspect ratio "postcss-write-svg": {utf8: false} / / the solution used to deal with the mobile 1px. The plug-in mainly uses border-image and background to do 1px related processing. "postcss-cssnext": {}, / / this plug-in allows us to use future features of CSS, which will be compatible with these features. "postcss-px-to-viewport": {/ / convert px units to window units such as vw, vh, vmin, or vmax, which is also one of the core plug-ins of vw adaptation. ViewportWidth: viewportWidth, / / width of the window viewportHeight: 1334, / / height of the window unitPrecision: 3, / / convert px to the decimal place of the window unit value viewportUnit: "vw", / / specify the window unit value to be converted to selectorBlackList: [".windows", ".hairlines"], / / specify that the window unit is worth the class, which can be customized You can infinitely add minPixelValue: 1, / / less than or equal to 1px does not convert to window units mediaQuery: false / / allows px}, "postcss-viewport-units": {}, / / adapts to vw, vh, vmin and vmax in media queries. This is a plug-in "cssnano" that is essential for implementing vw layouts: {/ / is mainly used to compress and clean up CSS code. In Webpack, cssnano and css-loader are bundled together, so you don't need to load it yourself. Preset: "advanced", / / repeatedly call autoprefixer: false, / / cssnext and cssnano both have autoprefixer, in fact only one is needed, so delete the default autoprefixer and set the autoprefixer in cssnano to false. "postcss-zindex": false / / as long as this plug-in is enabled, the value of z-index is reset to 1}

When you switch between screens of different sizes, you need to dynamically change the size of the root font. A simple js is inserted into the head: create a new shipei.js directly under the public directory, and then introduce the js into the head of index.html.

/ / shipei.js (function () {function autoRootFontSize () {document.documentElement.style.fontSize = Math.min (screen.width,document.documentElement.getBoundingClientRect (). Width) / 750 * 32 + "px"; / / take the minimum values of screen.width and document.documentElement.getBoundingClientRect () .width; divide by 750and multiply by 32 If the screen size becomes 375px, then the font is 16px; that is, the root font fontSize size is proportional to the screen size! Is it very simple} window.addEventListener ("resize", autoRootFontSize); autoRootFontSize ();}) (); index.html

Pay attention to the things put in the public, you don't have to write the beginning directory. If you can't find it when the scaffolding is packed, you will go to the public folder to find it.

About

What getBoundingClientRect () .width actually gets is the distance from the right side of the parent to the left of the browser origin (0mem0) to the browser origin (0mem0), that is, the width of the parent + 2padding+2border.

The clientWidth at this time is equal to the width of the parent + 2*padding, excluding the width of the border.

When the child content is not hidden, that is, when overflow is auto, the width of the former is still this number, because the parent has not adapted the box model. The width of the latter is the width obtained above-the width of the scroll bar (17px)

* {margin: 0; padding: 0;} / * getBoundingClientRect () .width actually obtains the distance from the right side of the parent to the left side of the browser origin (0mem0) to the browser origin (0mem0), that is, the width of the parent + 2padding+2border. The clientWidth at this time is equal to the width of the parent + 2*padding, excluding the width of the border. When the child content is not hidden, that is, when overflow is auto, the width of the former is still this number, because the parent has not adapted the box model. The width of the latter is the width obtained above-the width of the scroll bar (17px); examples are as follows: * / var divP = document.getElementById ("divParent"); var divD = document.getElementById ("divDisplay"); var clientWidth = divP.clientWidth; var getWidth = divP.getBoundingClientRect (). Width; divD [XSS _ clean] + = "clientWidth:" + clientWidth + "" DivD [XSS _ clean] + = "getWidth:" + getWidth + ""

The running result is clientWidth 516, and his calculation is content width + 2padding.

GetWidth (that is, getBoundingClientRect () .width) includes content width + 2padding+2border

Step 5: convert the px on the design draft into rem: install the cssrem plug-in (in the plug-in market): then go to File-- > preferences-- > Settings and search cssrem to set Root Font Size to 16.

Thank you for reading, the above is the content of "how to replace px with rem in vue project". After the study of this article, I believe you have a deeper understanding of how to use rem to replace px in vue project, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.