Detaillierte Erklärung der Vue px-zu-rem-Konfiguration

// Basisgröße const baseSize = 32
// Setze die Rem-Funktion function setRem () {
  // Das Skalierungsverhältnis der aktuellen Seitenbreite im Verhältnis zur Breite 750, das nach Bedarf geändert werden kann.
  const scale = document.documentElement.clientWidth / 750
  // Schriftgröße des Stammknotens der Seite festlegen document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// setRem() initialisieren
//Reset rem beim Ändern der Fenstergröße
Fenster.onresize = Funktion () {
  setRem()
}

importiere './config/rem'

npm installiere postcss-pxtorem -D

modul.exporte = {
  Plugins: {
    Autopräfix: {},
    "postcss-pxtorem": {
      "rootValue": 16,
      "Eigenschaftenliste": ["*"]
    }
  }
}

npm ich lib-flexible --save

npm installiere px2rem-loader --save-dev

importiere 'lib-flexible/flexible'

const px2remLoader = {
    Lader: „px2rem-loader“,
    Optionen:
      remEinheit: 37,5
    }
  }<br>//px2remLoader in der Methode generateLoaders hinzufügen
1
const loaders = [cssLoader,px2remLoader]

modul.exporte = {
     chainWebpack: (Konfiguration) => {
         Konfigurationsmodul
         .regel('css')
         .test(/\.css$/)
         .oneOf('vue')
         .resourceQuery(/\?vue/)
         .verwenden('px2rem')
         .loader('px2rem-loader')
         .Optionen({
             remUnit: 75 // 75 bedeutet den Designentwurf von 750, 37,5 bedeutet den Designentwurf von 375})
     }
 }

<Stil src='../assets/style.css'>
 /* px2rem kann normal konvertieren*/
</Stil>

<Stil>
  /* px2rem kann nicht normal konvertieren */
  @import '../assets/style.css';
</Stil>

<Stil>
  /* px2rem kann nicht normal konvertieren */
  @import url('../assets/style.css');

</Stil>

npm ich amfe-flexibel -S

npm installiere postcss-pxtorem --save-dev

importiere 'amfe-flexibel'

modul.exporte = {
  Plugins: {
    'postcss-pxtorem': {
      Wurzelwert: 37,5,
      Eigenschaftenliste: ['*']
    }
  }
}