Beispielcode zur Implementierung der PC-Auflösungsanpassung in Vue

planen

• lib-flexible + px2remLoader
• lib-flexible : Alibabas skalierbare Layout-Lösung
• px2rem-loader : px zu rem

Abhängigkeiten installieren

npm installiere px2rem-loader -D
npm installiere lib-flexible -S

Einführung von Abhängigkeiten

main.js importiert lib-flexible

importiere 'lib-flexible'

Konvertieren Sie px in rem

options von vue-loader und anderen Stylefile- loader werden letztlich durch die Methoden in build/utils.js generiert. Wir müssen nur noch einen px2remLoader nach cssLoader hinzufügen. Die remUnit Option von px2rem-loader bedeutet 1rem = wie viele Pixel. In Kombination mit der Lösung von lib-flexible setzen wir options.remUnit von px2remLoader auf 1/10 der Breite des Designentwurfs. Hier nehmen wir an, dass die Breite des Designentwurfs 1920px

Fügen Sie px2remLoader in build/utils.js

const cssLoader = {
    Lader: "CSS-Lader",
    Optionen:
      Quellkarte: Optionen.Quellkarte
    }
  }

  // Code hinzufügen, px zur rem-Konfiguration (px2remloader muss zum Loader-Array hinzugefügt werden)
  const px2remLoader = {
    Lader: „px2rem-loader“,
    Optionen:
      remUnit: 192, //Laut dem visuellen Entwurf ist rem ein Zehntel von px, 1920px 192 rem
      // remPrecision: 8 // Wie viele Dezimalstellen bleiben im konvertierten rem erhalten}
  }

Fügen Sie es in das Loader-Array ein

// Loader-String generieren, der mit dem Plugin „Text extrahieren“ verwendet werden soll
Funktion generateLoaders (Loader, LoaderOptions) {
   const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

   wenn (Lader) {
     loaders.push({
       Lader: Lader + '-Lader',
       Optionen: Objekt.assign({}, loaderOptions, {
         Quellkarte: Optionen.Quellkarte
       })
     })
   }
   //...
 }

flexible.js ändern

Globale Suche nach flexible.js

Passen Sie den Code an die PC-Seite an

Funktion refreshRem(){
   var Breite = docEl.getBoundingClientRect().width;
    wenn (Breite / dpr > 540) {
        Breite = Breite * dpr;
    }
    //Skalierungsverhältnis, kann je nach tatsächlicher Situation geändert werden var rem = width / 8;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

Bei Stilen, die nicht konvertiert werden sollen, können Sie dahinter /*no*/ hinzufügen, um sicherzustellen, dass sie nicht konvertiert werden.

Referenzblog

VUE PC-seitige Anpassungslösung flexible + px2remLoader感謝大佬
Vue realisiert PC-Auflösungsanpassung感謝大佬

Damit ist dieser Artikel über den Beispielcode für die PC-seitige Auflösungsanpassung von Vue abgeschlossen. Weitere Informationen zur PC-seitigen Auflösungsanpassung von Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!