Das mobile Vue-Terminal kann sich nicht anpassen

Mit der Entwicklung des mobilen Internets nutzen immer mehr Websites und Anwendungen mobile Endgeräte als Hauptzugriffsmethode. In der mobilen Entwicklung ist die Anpassung an unterschiedliche Geräteauflösungen zu einem wichtigen Thema geworden. Für Vue-Entwickler erfordert die mobile Anpassung die Berücksichtigung von Anpassungsproblemen für unterschiedliche Bildschirmgrößen, -dichten und -ausrichtungen.

Die traditionelle Anpassungsmethode wird durch Medienabfragen und REM-Einheiten erreicht. Die spezifische Methode besteht darin, zunächst unterschiedliche Stildateien für unterschiedliche Bildschirme einzurichten und dann die REM-Einheit zu verwenden, um die Schriftart und Elementgröße relativ zur Breite des Stammelements zu skalieren. Mobile Geräte verwenden normalerweise hochauflösende Bildschirme mit einem Device Pixel Ratio (DPR) von mehr als 1. Um den Anzeigeeffekt sicherzustellen, müssen Sie das richtige Skalierungsverhältnis über das Ansichtsfenster einstellen. Nachfolgend finden Sie ein Beispiel für ein Anpassungsschema basierend auf REM-Einheiten.

/* 设置用于计算 rem 值的根元素字体大小 */
html {
  font-size: 16px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  /* 针对 4 英寸屏幕设置样式 */
  html {
    font-size: 14px;
  }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
  /* 针对 4.7 英寸屏幕设置样式 */
  html {
    font-size: 16px;
  }
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
  /* 针对 5.5 英寸屏幕设置样式 */
  html {
    font-size: 18px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* 针对 9.7 英寸 iPad 屏幕设置样式 */
  html {
    font-size: 24px;
  }
}

Wie im obigen Code gezeigt, werden Medienabfragen verwendet, um unterschiedliche Schriftgrößen des Stammelements entsprechend der Bildschirmbreite verschiedener Geräte festzulegen, und dann wird die REM-Einheit verwendet, um die Elementgröße relativ zur Breite des Elements zu skalieren Wurzelelement.

Allerdings gibt es bei dieser traditionellen Anpassungsmethode einige Probleme. Erstens kann es zu Skalierungsfehlern kommen, da rem relativ zur Schriftgröße des Stammelements berechnet wird. Zweitens kann es zu Problemen mit der Skalierungseinstellung des Ansichtsfensters kommen, was dazu führen kann, dass einige Elemente nicht ordnungsgemäß angezeigt werden.

Daher wird bei der mobilen Vue-Entwicklung empfohlen, Flex-Layout als Anpassungslösung zu verwenden. Der Vorteil der Verwendung des Flex-Layouts besteht darin, dass Sie sich an Geräte unterschiedlicher Größe anpassen können, indem Sie unterschiedliche Flex-Eigenschaften festlegen. Typischerweise wird die mobile Anpassung durch die folgenden Schritte erreicht:

1. Verwenden Sie das Ansichtsfenster, um das richtige Zoomverhältnis einzustellen.

Fügen Sie den folgenden Code im Head-Tag der HTML-Datei hinzu:

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

2. Aktivieren Sie die Flex-Layout-Funktion. 🔜 Wert gemäß der Auflösung des Entwurfsentwurfs.

Zum Beispiel: Ausgehend von der iPhone 6/7/8-Serie (375 x 667) beträgt die Entwurfsgröße 750 x 1334. Sie können zunächst die Schriftgröße des Stammelements auf 100 Pixel und dann die Größe der anderen Elemente festlegen Elemente in rem-Einheiten.

const path = require('path')

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "${path.resolve(__dirname, 'src/assets/scss/flex.scss')}";`
      },
    },
  },
}

Nachdem Sie die oben genannten Schritte zur Implementierung der mobilen Anpassung ausgeführt haben, können Sie die Verwendung herkömmlicher Medienabfragen vermeiden und die Elementgröße stark skalieren. Darüber hinaus eignet sich das responsive Flex-Layout für Mobilgeräte mit unterschiedlichen Auflösungen und Ausrichtungen und kann sich besser an das Gerät des Benutzers anpassen. flex.scss

Das obige ist der detaillierte Inhalt vonDas mobile Vue-Terminal kann sich nicht anpassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!