Zusammenfassung der mobilen Anpassungslösung von webpack

Eines der häufigsten Probleme bei der mobilen Entwicklung ist die Anpassung an unterschiedliche Bildschirmbreiten. Die derzeit gebräuchlicheren Anpassungslösungen sind rem und vw, wobei es sich um relative Einheiten in CSS handelt.

rem

W3C definiert rem als die Schriftgröße des Stammelements. Es handelt sich um eine Einheit, die nur relativ zur Schriftgröße des Stammelements (HTML-Element) des Browsers bestimmt wird. Das heißt, für Modelle unterschiedlicher Breite müssen wir nur die Schriftgröße des entsprechenden Stammelements berechnen und denselben CSS-Code verwenden, um eine proportionale Anpassung zu erreichen. Betrachten Sie den einfachsten Fall:

HTML-Codeausschnitt

// Wichtige Metadaten für mobile Seiten: Stellen Sie die Breite des Gerätebildschirms auf die Dokumentbreite ein <meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">

js-Codeausschnitt

//Berechnen Sie die Schriftgröße des Stammelements basierend auf der Dokumentbreite. Nehmen Sie als Beispiel 1/10 der Dokumentbreite. Wenn die Bildschirmbreite 375 beträgt, beträgt die Schriftgröße des Stammelements 37,5 Pixel.
var w = Dokument.Dokumentelement.Clientbreite;
document.documentElement.style.fontSize = w / 10 + 'px';

CSS-Codeausschnitt

//Wenn Sie zu diesem Zeitpunkt .div schreiben{
  Breite: 2rem;
}
//Dann beträgt die Breite dieses Divs 75 Pixel. Wenn die Bildschirmbreite 360 ​​beträgt, ist das Div 72 Pixel breit.
//In der täglichen Entwicklung ist der gängigste Designentwurf 750px. Wenn die Höhe eines Bereichs im Designentwurf 30px beträgt,
//Schreiben Sie height: 0.4rem (30/75) in CSS, um eine proportionale Skalierung zu erreichen

Bei der tatsächlichen Entwicklung verwenden wir beim Erstellen von Webpack normalerweise Plug-Ins, um eine REM-Anpassung zu erreichen: postcss-pxtorem und lib-flexible.

Installieren: npm i postcss-pxtorem --D und npm i amfe-flexible --S

Konfigurieren Sie den Postcss-Loader in webpack.config.js

modul.exporte = {
    Eintrag: "./src/index.js",
    Ausgabe: {
        Pfad: Pfad.join(__dirname,"/dist"),
        Dateiname: "bundle.js"
    },
    Modul:{
        Regeln:[
            {
                Test: /\.css$/,
                use: ['style-loader','css-loader','postcss-loader'] //Postcss-Loader konfigurieren
            }
        ]
    },  
}

Erstellen Sie eine neue .postcssrc.js-Datei im Stammverzeichnis des Projekts und schreiben Sie die Konfiguration des postcss-pxtorem-Plugins hinein

modul.exporte = {
  "Plugins": {
    "postcss-pxtorem": {
        rootValue: 75, //750er Designentwurf propList: ['*']
     }
   }
}

Führen Sie lib-flexible in die durch den Eintrag angegebene JS-Datei ("./src/index.js") ein.

importiere 'amfe-flexibel'

Auf diese Weise können Sie den absoluten Pixelwert direkt im Designentwurf in CSS schreiben. Wenn beispielsweise die Breite eines div#tests in einem 750-Designentwurf 200px beträgt, können Sie dies ohne Konvertierung direkt schreiben.

#prüfen{
  Breite: 200px
}

vw

Eine andere Lösung besteht darin, vw zu verwenden: 1 % der Breite des Ansichtsfensters, also eine Einheit relativ zur Breite des sichtbaren Bereichs des Browsers.

// Wichtige Metadaten für mobile Seiten: Stellen Sie die Breite des Gerätebildschirms auf die Dokumentbreite ein <meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">

Wenn auf Mobilgeräten width = device-width konfiguriert ist, beträgt die Bildschirmbreite 100 vw.

Bei Verwendung des VW-Layouts muss die Schriftgröße des Stammelements in js nicht dynamisch wie bei rem eingestellt werden, sondern ist direkt relativ zur Bildschirmbreite. Beispielsweise beträgt im Designentwurf von 750 die Breite eines Divs 200px, sodass Sie schreiben können: width: 200 / 750 * 100 vw

Mit webpack können wir das Plugin „postcss-px-to-viewport“ verwenden, um dies zu erreichen:

Installieren: npm i postcss-px-to-viewport --D

Konfigurieren Sie den Postcss-Loader in webpack.config.js wie oben beschrieben.
Erstellen Sie eine neue .postcssrc.js-Datei im Stammverzeichnis des Projekts und schreiben Sie die Plugin-Konfiguration postcss-px-to-viewport hinein

modul.exporte = {
  "Plugins": {
    'postcss-px-zum-Ansichtsfenster': {
        Ansichtsfensterbreite: 750 //750 Designentwurf}
   }
}

Auf diese Weise können Sie den absoluten Pixelwert im Designentwurf direkt in CSS schreiben, das Beispiel ist das gleiche wie das rem-Beispiel oben.

An UI-Frameworks von Drittanbietern anpassen

Manchmal verwenden wir auf Mobilgeräten andere Komponentenbibliotheken und verweisen auf UI-Frameworks von Drittanbietern wie Vant und Mint-UI. Da Frameworks von Drittanbietern px-Einheiten verwenden, die auf einem 375-px-Designentwurf basieren, können wir, wenn unser Projekt einen 750-px-Designentwurf hat, nicht dieselbe Ansichtsbreite für die Anpassung verwenden.

Derzeit können Sie es in .postcssrc.js wie folgt konfigurieren (am Beispiel von vw, rem ist ähnlich):

const Pfad = require('Pfad')
module.exports = ({Datei}) => {

  //Wenn Sie das Vant-UI-Framework verwenden, const width = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750; 
  
  zurückkehren {
    "Plugins": {
      "postcss-px-zum-Ansichtsfenster": {
        Ansichtsfensterbreite: Breite,
      }
    }
  }
}

Abschluss

rem und vw sind beides häufig verwendete mobile Anpassungslösungen. Der Unterschied zwischen beiden liegt zunächst in der Kompatibilität. Rem ist mit älteren Browserversionen kompatibel (siehe die Caniuse-Website caniuse.com/). Zweitens muss Rem die Schriftgröße des Stammelements über JS berechnen, während VM eine reine CSS-Implementierung ist.

Damit ist dieser Artikel mit der Zusammenfassung der mobilen Anpassungslösung von webpack abgeschlossen. Weitere relevante Inhalte zur mobilen Anpassung von webpack 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!