Eine kurze Diskussion über die perfekte Anpassungslösung für das mobile Vue-Terminal

Vorwort: Wie passt sich Vue basierend auf einem aktuellen medizinischen Mobilprojekt an unterschiedliche Bildschirmgrößen auf verschiedenen Bildschirmen an?

1. Anpassungslösung

Die Vue Mobile-Lösung, die ich in diesem Projekt verwendet habe, ist eine Kombination aus amfe-flexible und postcss-pxtorem).

Lassen Sie mich zunächst amfe-flexible vorstellen

amfe-flexible ist ein flexibles Layoutkonfigurationsschema, bei dem hauptsächlich 1rem auf viewWidth/10 eingestellt wird.

Dann gibt es diese Bibliothek postcss-pxtorem

postcss-pxtorem ist ein Postcss-Plugin, das Pixeleinheiten in REM-Einheiten umwandelt.

2. Wie verwenden und konfigurieren?

1. Installieren Sie amfe-flexible und postcss-pxtorem

npm installiere amfe-flexible --save
npm installiere postcss-pxtorem --save

2. Nach Abschluss der Installation muss es eingeführt werden, bevor es verwendet werden kann

Wir müssen es in main.js importieren, um es verwenden zu können

importiere „amfe-flexible“;

Dieser Import ist OK

3. Dann kommen die postcss-pxtorem Konfigurationsschritte

Um postcss-pxtorem zu konfigurieren, können Sie es in einer der folgenden Dateien konfigurieren: vue.config.js, .postcssrc.js und postcss.config.js. Die Gewichtung nimmt von links nach rechts ab. Wenn keine solche Datei vorhanden ist, erstellen Sie eine neue Datei. Sie müssen nur eine davon festlegen:

Der Einfachheit halber habe ich den Code in vue.config.js wie folgt konfiguriert:

modul.exporte = {
    //...andere Konfiguration CSS: {
        loaderOptions: {
            postcss: {
                Plugins: [
                    erfordern('postcss-pxtorem')({
                        Wurzelwert: 37,5,
                        Eigenschaftenliste: ['*']
                    })
                ]
            }
        }
    },
}

Konfigurieren Sie in .postcssrc.js oder postcss.config.js wie folgt:

modul.exporte = {
    "Plugins": {
        'postcss-pxtorem': {
            Wurzelwert: 37,5,
            Eigenschaftenliste: ['*']
        }
    }
}

Notiz:
1. Legen Sie rootValue entsprechend der Breite des Designs geteilt durch 10 fest. Angenommen, das Design ist 375, dann wird rootValue auf 37,5 festgelegt.
2. propList wird verwendet, um die Eigenschaften festzulegen, die konvertiert werden müssen. Dabei bedeutet *, dass alle Eigenschaften konvertiert werden.

Mit der obigen Konfiguration können wir es im Projekt verwenden.

In unserem Projekt schreiben wir beispielsweise:

.login-form {
    Breite: 90%;
    Position: absolut;
    oben: 50 %;
    links: 50%;
    transformieren: übersetzen(-50 %, -50 %);
    Hintergrundfarbe: #fff;
    Polsterung: 20px;
    Box-Größe: Rahmenbox;
    Rahmenradius: 10px;
    .Titel {
      Position: absolut;
      oben: -50px;
      Schriftgröße: 24px;
      Farbe: #fff;
      links: 0;
      rechts: 0;
      Textausrichtung: zentriert;
    }
  }

Die Ausgabe unseres Codes lautet dann wie folgt und das Plug-In hilft uns, Einheiten automatisch umzurechnen.

login-wraper .login-form {
    Breite: 90%;
    Position: absolut;
    oben: 50 %;
    links: 50%;
    transformieren: übersetzen(-50 %,-50 %);
    Hintergrundfarbe: #fff;
    Polsterung: .53333rem; // Beachten Sie, dass dies die konvertierte Einheit „Box-Größe“ ist: Border-Box;
    border-radius: .26667rem; // Beachten Sie, dass dies die umgerechnete Einheit ist}

Dies ist das Ende dieses Artikels über die perfekte Anpassungslösung für mobile Vue-Terminals. Weitere relevante Inhalte zur perfekten Anpassungslösung für mobile Vue-Terminals finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!