Anpassung des mobilen Endgeräts vue2 – px an rem

Schreiben wir über die Verwendung mobiler Webseiten. Wie können wir das Blue Lake UI-Bild mit einer Größe von 750 Pixel an das mobile Endgerät anpassen?

Schritt 1: Wir müssen zwei Plugins herunterladen: „amfe-flexible“  und „postcss-pxtorem“.

npm install amfe-flexible postcss-pxtorem --save

amfe-flexible ist eine Bibliothek zum Festlegen des REM-Basiswerts. Sie kann den REM-Wert entsprechend der Bildschirmgröße dynamisch anpassen, um den Zweck der mobilen Anpassung zu erreichen.

postcss-pxtorem ist ein PostCSS-Plugin, das px-Werte in CSS automatisch in rem-Werte konvertiert. Es unterstützt auch Funktionen wie die Angabe des Konvertierungsverhältnisses zwischen px und rem und die Angabe von Attributen, die nicht konvertiert werden müssen, was uns ermöglicht leicht zu bewegen. Terminalanpassung.

Durch die Kombination von amfe-flexible und postcss-pxtorem kann eine mobile Anpassung problemlos implementiert werden, ohne dass unterschiedliche Stilcodes für unterschiedliche Bildschirmgrößen geschrieben werden müssen.

Schritt 2: Führen Sie das amfe-flexible-Paket in main.js ein

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
...
// 引入 amfe-flexible
import 'amfe-flexible';

Schritt 3: Erstellen Sie eine postcss.config.js-Datei im Stammverzeichnis und schreiben Sie den folgenden Code

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, // 设计稿宽度的 1/10，例如设计稿宽度为 750px，则 rootValue 为 75
      propList: ['*'],
    }
  }
}

Zu diesem Zeitpunkt haben wir die Anpassung des mobilen Endgeräts abgeschlossen und px in rem konvertiert.