Mobile adaptation makes PX convert REM automatically

Time:2019-11-16
  • Install postcss pxtorem first: NPM install postcss pxtorem — save dev for installation
  • Set the dynamic root element font size by changing the screen:

 

I write it in the HTML of Vue

function setRem () {
        Let htmlwidth = document.documentelement.clientwidth | | document.body.clientwidth; // check the screen width of HTML and body
        Document. Documentelement. Style. Font size = htmlwidth / 7.5 + 'PX'; // set the font size to 100px on the 750 screen, so that the converted REM can see at a glance how many PX it was before. The development screen size can be selected by yourself, and the 320 screen width of 3.2 can also be selected.
      }
      setRem();
      Window. Onresize = function() {// when the size of the browser changes, the window. Onresize function is triggered, and then the setrem() function is triggered
        setRem()
      }

-Then in. Postcssrc. JS, configure postcss pxtorem (. Postcssrc. JS is the scaffold auto generated file. After configuration, run NPM run dev again):

 

What needs to be configured in the red circle, the rest is self-contained:
 

 

'postcss-pxtorem': {
  Rootvalue: 100, // the root element size setting, that is, the font size of HTML
  Unitprecision: 5, // how many decimal places of rem are reserved
  Proplist: ['*'], // is a list of stored properties to be converted. Here it is set to ['*'] all. If you need to set only the border, you can write ['*', '! Border *']  
  Selectorsblacklist: ['. Radius'], // is an array that filters the CSS selectors. For example, if you set it to ['fs'], for example, the FS XL class name. The PX style in it will not be converted. Here, regular writing is also supported.
  Replace: true, // I don't know how to use this. Let me know if you know
  Mediaquery: false, // media query (@ media screen and so on) is not valid
  Minpixelvalue: 12 // PX less than 12 will not be converted

    }

After configuration, you can run NPM run dev again
 

 

Width and height of 200px
 

The 100px of the 2rem configuration changed from 200px to font size. Rootvalue is 100

 

Set the style with class name radius not to be converted
 

 

summary

The above is the mobile terminal adaptation introduced by Xiaobian to make PX automatically convert rem, hoping to help you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!