Mobile adaptation makes PX convert REM automatically

  • 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.
      Window. Onresize = function() {// when the size of the browser changes, the window. Onresize function is triggered, and then the setrem() function is triggered

-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



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!

Recommended Today

What are the new methods of visual + map technology?

Last week, Ren Xiaofeng, chief scientist of Alibaba Gaode map, made a technical exchange with you on the development of computer vision related technology and the application in the field of map travel at the online live broadcast activity of “cloud dialogue” between senior students of Alibaba. The interaction between live broadcast is hot. Especially […]