Beispielcode zur Implementierung der Großbildanpassung auf dem PC mit vue+px2rem (REM-Anpassung)

Konfiguration Vorwort

Projektaufbau: basierend auf vue-cli3, unter Verwendung von postcss-px2rem px2rem-loader zur rem-Anpassung

Implementierungsprinzip: Bei jedem Packen konvertiert webpack mithilfe des Plug-Ins postcss-px2rem automatisch px-Einheiten in rem-Einheiten

px2rem ist ein Plug-In, das px automatisch in rem umwandelt und Entwicklern hilft, den Berechnungsprozess der gegenseitigen Konvertierung zwischen Pixeln zu reduzieren.

Doch es gibt eine Falle: Einige Komponenten des UI-Frameworks verwenden JavaScript, um CSS als Inline-Styles direkt in HTML-Tags zu schreiben. Das entsprechende CSS wird beim Verpacken und Anpassen nicht gelesen, daher müssen Sie die entsprechenden Styles konfigurieren und im Style ist „!important“ erforderlich, um den Style zu überschreiben.

Implementierungsschritte

Der erste Schritt besteht darin, postcss-px2rem und px2rem-loader zu installieren

Öffnen Sie das Befehlszeilentool und geben Sie den folgenden Befehl ein, um das Plug-In zu installieren (natürlich ist die Installation mit dem Taobao-Spiegel cnpm schneller).

npm installiere postcss-px2rem px2rem-loader --save

Der zweite Schritt besteht darin, eine neue rem.js-Datei im util-Verzeichnis im Stammverzeichnis src zu erstellen.

// rem proportionale Anpassungskonfigurationsdatei // Basisgröße const baseSize = 16
// Setze die Rem-Funktion function setRem () {
  // Das Skalierungsverhältnis der aktuellen Seitenbreite im Verhältnis zur Breite 1920, das nach Bedarf geändert werden kann.
  const scale = document.documentElement.clientWidth / 1920
  // 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()
}

Der dritte Schritt besteht darin, die Adapterdatei in main.js einzuführen

importiere './util/rem'

Schritt 4: Konfigurieren Sie das Plugin in vue.config.js

// Importieren Sie das Plugin für die proportionale Anpassung const px2rem = require('postcss-px2rem')

//Konfiguriere die Grundgröße const postcss = px2rem({
  // Basisgröße baseSize, muss dieselbe sein wie in rem.js remUnit: 16
})

// Verwende das Plugin für proportionale Anpassung module.exports = {
  lintOnSave: wahr,
  css: {
    loaderOptions: {
      postcss: {
        Plugins: [
          Abonnieren
        ]
      }
    }
  }
}

Zusammenfassen

Dies ist das Ende dieses Artikels über die Großbildanpassung von vue+px2rem auf dem PC. Weitere relevante Inhalte zur Großbildanpassung von vue+px2rem finden Sie in den vorherigen Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!