Vue3.0 Adaptiver Betrieb von Computern mit unterschiedlichen Auflösungen

Zuerst müssen wir einige Abhängigkeiten installieren

npm i lib-flexible-computer -S //Der Stammknoten ändert sich entsprechend der Schriftgröße des Seitenansichtsfensters npm i px2rem-loader -D //Px automatisch in rem umwandeln
npm i postcss-px2rem // Ein Plugin, das px im Code automatisch in das entsprechende rem umwandelt

Was ich Ihnen hier sagen möchte, ist die Abhängigkeit von lib-flexible-computer, die von npm installiert wurde. Ich glaube, dass jeder nach vielen Methoden gesucht hat, um sich an den PC anzupassen. Die meisten von ihnen haben die folgende Abhängigkeit installiert

npm ich lib-flexible -S

Installieren Sie diese Abhängigkeit. Wenn Sie die Anpassung vornehmen, kann sie nur für Bildschirme unter 540 verwendet werden. Auf der PC-Seite ist sie nicht sehr nützlich, daher habe ich sie in die oben beschriebene Abhängigkeit geändert. Kommen wir ohne weitere Umschweife zum Punkt. So verwenden Sie sie nach der Installation der Abhängigkeit

Importieren in main.js

importiere "lib-flexible-computer";

Erstellen Sie dann eine vue.config.js-Datei auf derselben Ebene wie src und fügen Sie den folgenden Code hinzu

modul.exporte = {
 öffentlicher Pfad: "./",
 Ausgabeverzeichnis: "dist",
 lintOnSave: wahr,
 css: {
  loaderOptions: {
   css: {},
   postcss: {
    Plugins: [
     erfordern("postcss-px2rem")({
      remUnit: 192///Designbreite/10
     })
    ]
   }
  }
 }
};

Auf diese Weise wird der von Computern mit unterschiedlichen Auflösungen generierte Code automatisch in rem umgewandelt
Notiz:**

Die Größe des Designs wurde oben festgelegt. Nachdem diese Vorgänge abgeschlossen sind, können Sie die Größe des Designs beliebig eingeben und es wird automatisch konvertiert.

**

Dies ist das Ende dieses Artikels über die Anpassung von vue3.0 an Computer mit unterschiedlichen Auflösungen. Weitere relevante Inhalte zu Computern mit adaptiver Auflösung von vue3.0 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!