1. npm i postcss-px2rem --save

  2. Create rem.js and dynamically calculate font size

(function () {function setRootFontSize() {let rem, RootWidth = rootHtml. ClientWidth < 1440? 1440: FontSize = '${rem}px'} setRootFontSize() window.addEventListener('resize', setRootFontSize, false) })()Copy the code

  1. Rem.js is introduced in main.js

  2. Add the configuration to. Postcsrc. Js

'postcsS-px2REM ':{'remUnit':100}, and //remUnit for the same value as the 100 that gets multiplied in rem.jsCopy the code
  1. By default, only the px in the style of the component can be converted. The public style file imported by import cannot be converted. If you want to convert, you need to import the public file in app. vue using style link

<style lang="scss" link="./styles/common.scss"></style>