Implementierung der mobilen Postcss-pxtorem-Anpassung

npm installiere postcss-pxtorem -D

modul.exporte = {
  Plugins: {
    'Autoprefixer': {
      Browser: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 32, //Das Ergebnis ist: Designelementgröße/32 (im Allgemeinen wird die Stammelementgröße eines 750px-Designs auf 32 gesetzt). Wenn die Elementbreite beispielsweise 320px beträgt, wird die endgültige Seite in 10rem konvertiert
      propList: ['*'], //Eigenschaftsselektor, * steht für allgemeinen SelektorBlackList:[] ignoriert den Selektor.ig- gibt an, dass alle Selektoren, die mit .ig- beginnen, nicht konvertiert werden}
  }
}

// rem proportionale Anpassungskonfigurationsdatei // Basisgröße const baseSize = 750 // Beachten Sie, dass dieser Wert mit dem rootValue in der Datei postcss.config.js übereinstimmen muss // Setze die rem-Funktion function setRem () {
  // Die aktuelle Seitenbreite entspricht dem Breitenskalierungsverhältnis von 375 und kann nach Bedarf geändert werden. Im Allgemeinen ist der Entwurf 750 breit (Sie können die Entwurfszeichnung abrufen und sie nach Belieben ändern).
  const scale = document.documentElement.clientWidth / 375
  // Legen Sie die Schriftgröße des Stammknotens der Seite fest („Math.min (Scale, 2)“ bedeutet, dass das maximale Vergrößerungsverhältnis 2 beträgt und entsprechend den tatsächlichen Geschäftsanforderungen angepasst werden kann.)
  document.documentElement.style.fontSize = Basisgröße * Math.min(Skala, 2) + 'px'
}
// setRem() initialisieren
//Reset rem beim Ändern der Fenstergröße
Fenster.onresize = Funktion () {
  setRem()
}