Comment implémenter la conversion de taille dans Uniapp (deux manières)

Avec le développement rapide de l'Internet mobile, de plus en plus de personnes choisissent d'utiliser des applications sur leur téléphone mobile pour obtenir des informations, communiquer et se divertir. À l'heure actuelle, une solution multiplateforme devient de plus en plus nécessaire, et uniapp est un framework de développement multiterminal développé sur la base de Vue. Il vous suffit d'écrire un ensemble de code pour une application et de le publier sur plusieurs plateformes.

Les avantages d'uniapp sont évidents, mais il présente également certains problèmes, dont le plus courant est l'adaptation de la taille. Étant donné que la taille de l'écran, le dpi, les pixels et d'autres paramètres sont différents selon les appareils, il est nécessaire de s'adapter aux différents appareils et de permettre à l'application de s'afficher en plein écran.

Il existe généralement deux méthodes pour implémenter la conversion de taille dans uniapp : la méthode rem + less et la méthode de conversion d'unité. Ci-dessous, nous présenterons respectivement les méthodes de mise en œuvre de ces deux méthodes.

1. méthode rem + less

rem est une unité de longueur relative, qui est une unité relative à la taille de police de l'élément racine. Normalement, la taille de police de l'élément racine est de 16 px. Ensuite, dans uniapp, nous pouvons définir la police de l'élément racine sur un dixième de 750, soit 75 px, puis calculer toutes les tailles en rem, afin qu'elle puisse s'adapter aux différentes tailles d'écran.

De plus, afin de simplifier davantage le développement, nous pouvons en utiliser moins pour traiter les fichiers de style et utiliser ses variables et fonctions de mixage pour réaliser une conversion de taille.

La méthode d'implémentation spécifique est la suivante :

(1) Créez un fichier config.less dans le répertoire racine du projet avec le contenu suivant :

// Définissez la largeur du brouillon de conception
@designWidth :

; // Définir la taille de la police de l'élément racine, un dixième de la largeur du brouillon de conception
@rootFont: (@designWidth / 10);

// Définir la fonction de conversion rem
rem(@pxValue) {
return (@pxValue / @rootFont) rem;
}

(2) Dans le fichier de style qui doit utiliser la conversion de taille, introduisez le fichier config.less et utilisez la fonction rem pour le calcul, par exemple :

@import " config.less";

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

De cette façon, nous pouvons obtenir le même effet d'affichage sur différents appareils.

2. Méthode de conversion d'unités

Une autre façon d'obtenir une conversion de taille consiste à utiliser l'API fournie par uniapp pour convertir les unités en rpx, upx, px et autres unités. Cette méthode est relativement simple, il suffit d'utiliser l'API directement dans le fichier wxss.

Par exemple, nous souhaitons définir la taille de la police sur 32 px et utiliser la méthode rpx pour la conversion. Le code est le suivant :

.upx{
font-size : uni.upx2px(32) uni.upx2rpx(32);
}

où, uni.upx2px(32) signifie convertir 32upx en unités de pixels, et uni.upx2rpx(32) signifie convertir 32upx en unités rpx. De cette façon, nous pouvons obtenir le même effet d’affichage sur différents appareils.

Pour résumer, uniapp est un très excellent framework de développement multi-terminal. Cependant, pendant le processus de développement, des problèmes d'adaptation de taille sont inévitables. Cependant, nous pouvons utiliser la méthode rem + less ou la méthode de conversion d'unités pour résoudre ce problème, afin que l'application puisse s'adapter à différents appareils et s'afficher en plein écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!