PC implementation adaptation (flexibility.js + PostCSS-px2REM)

January 15, 2024

by Elizabeth Crawford

No Comments

Flexible. Js + PostCSS-px2REM for VUE – CLI3 PC

1, install NPM install postcss-px2rem NPM install lib-flexible -s 2, configure vue. Config. {}, postcss: { plugins: [ require('postcss-px2rem')({ remUnit: 192, // rem is 1/10th of px})]}}}, 3, import 'lib-flexible' in main.js 4, find \node_modules\lib-flexible\ flexibility.jsCopy the code

5, modified to function refreshRem () {var width = docEl. GetBoundingClientRect (). The width; if (width / dpr > 540) { width = width * dpr; Var rem = width / 8; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } 6, the style is not converted, just add /no/ change or PX uppercase border: 1px solid red; /*no*/Copy the code