So implementieren Sie die Größenkonvertierung in Uniapp (auf zwei Arten)

Mit der rasanten Entwicklung des mobilen Internets entscheiden sich immer mehr Menschen dafür, Anwendungen auf ihren Mobiltelefonen zu nutzen, um Informationen, Kommunikation und Unterhaltung zu erhalten. Heutzutage wird eine plattformübergreifende Lösung immer notwendiger, und Uniapp ist ein auf Vue basierendes Multi-Terminal-Entwicklungsframework. Sie müssen lediglich einen Codesatz für eine Anwendung schreiben und ihn auf mehreren Plattformen veröffentlichen.

Die Vorteile von uniapp liegen auf der Hand, aber es gibt auch einige Probleme, von denen das häufigste die Größenanpassung ist. Da Bildschirmgröße, DPI, Pixel und andere Parameter auf verschiedenen Geräten unterschiedlich sind, ist es notwendig, sich an verschiedene Geräte anzupassen und die Anzeige der Anwendung im Vollbildmodus zu ermöglichen.

Normalerweise gibt es zwei Methoden zum Implementieren der Größenkonvertierung in Uniapp: die rem + less-Methode und die Einheitenkonvertierungsmethode. Im Folgenden stellen wir die Implementierungsmethoden dieser beiden Methoden vor.

1. rem + less-Methode

rem ist eine relative Längeneinheit, die eine Einheit relativ zur Schriftgröße des Stammelements ist. Normalerweise beträgt die Schriftgröße des Stammelements 16 Pixel. Dann können wir in uniapp die Schriftart des Stammelements auf ein Zehntel von 750, also 75 Pixel, einstellen und dann alle Größen rem berechnen, damit sie sich an unterschiedliche Bildschirmgrößen anpassen kann.

Um die Entwicklung weiter zu vereinfachen, können wir außerdem weniger zur Verarbeitung von Stildateien verwenden und deren Variablen und Mischfunktionen verwenden, um eine Größenkonvertierung zu erreichen.

Die spezifische Implementierungsmethode ist wie folgt:

(1) Erstellen Sie eine config.less-Datei im Projektstammverzeichnis mit folgendem Inhalt:

// Definieren Sie die Breite des Designentwurfs
@designWidth: 750;

// Definieren Sie die Schriftgröße des Stammelements, ein Zehntel der Breite des Designentwurfs
@rootFont: (@designWidth / 10);

// Definieren Sie die Funktion der REM-Konvertierung
rem(@pxValue) {
return (@pxValue / @rootFont) rem;
}

(2) Führen Sie in der Stildatei, die die Größenkonvertierung verwenden muss, die Datei config.less ein und verwenden Sie die rem-Funktion zur Berechnung, zum Beispiel:

@import " config.less";

.btn {
font-size: rem(32px);
width: rem(100px);
}

Auf diese Weise können wir auf verschiedenen Geräten den gleichen Anzeigeeffekt erzielen.

2. Methode zur Einheitenumrechnung

Eine weitere Möglichkeit zur Größenumrechnung besteht darin, die von uniapp bereitgestellte API zu verwenden, um Einheiten in rpx, upx, px und andere Einheiten umzuwandeln. Diese Methode ist relativ einfach. Verwenden Sie einfach die API direkt in der WXSS-Datei.

Zum Beispiel möchten wir die Schriftgröße auf 32 Pixel einstellen und die rpx-Methode zur Konvertierung verwenden. Der Code lautet wie folgt:

.upx{
Schriftgröße: uni.upx2px(32) uni.upx2rpx(32);
}

wobei uni.upx2px(32) die Konvertierung von 32upx in Pixeleinheiten bedeutet und uni.upx2rpx(32) die Konvertierung von 32upx in rpx-Einheiten bedeutet. Auf diese Weise können wir auf verschiedenen Geräten den gleichen Anzeigeeffekt erzielen.

Zusammenfassend lässt sich sagen, dass Uniapp ein hervorragendes Multi-Terminal-Entwicklungsframework ist. Während des Entwicklungsprozesses sind jedoch Probleme mit der Größenanpassung unvermeidlich. Wir können jedoch die Methode rem + less oder die Einheitenumrechnungsmethode verwenden, um dieses Problem zu lösen, sodass sich die Anwendung an verschiedene Geräte anpassen und im Vollbildmodus anzeigen kann.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Größenkonvertierung in Uniapp (auf zwei Arten). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!