Partage de technologie

solution d'adaptation uniapp

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Les puissantes unités adaptatives exclusives d'uni-app, upx et rpx, ne peuvent pas être des solutions attribuées dynamiquement...

uni-app utilise upx comme unité de taille par défaut, qui est une unité relative à la largeur de base et peut être adaptée en fonction de la largeur de l'écran. uni-app spécifie la largeur de la base de l'écran 750upx.

Les développeurs peuvent calculer la valeur upx des éléments de page via la largeur de base du brouillon de conception. La formule de conversion entre 1px du brouillon de conception et 1upx du style de cadre est la suivante :
Brouillon de conception 1px / Largeur de base du brouillon de conception = Style de cadre 1upx / 750upx

Par exemple:
Si la largeur du brouillon de conception est de 640 px et que la largeur de l'élément A sur le brouillon de conception est de 100 px, alors la largeur de l'élément A dans uni-app doit être définie sur : 750 * 100 / 640, et le résultat est : 117upx.
Si la largeur du brouillon de conception est de 375 px et que la largeur de l'élément B sur le brouillon de conception est de 200 px, alors la largeur de l'élément B dans uni-app doit être définie sur : 750 * 200/375, et le résultat est : 400upx.

Comme indiqué ci-dessous, la largeur du projet de conception est de 1920

Insérer la description de l'image ici
------Selon la formule设计稿宽度 / 750 = 比率 Ensuite, 1920/750=2,56 calcule le pourcentage standard de 750 du projet de conception de largeur 1920------

Pour plus de commodité, cliquez dans Hbuilder X工具>设置>语言服务配置Faites défiler vers le bas et il y a un px vers rpx/upx, mettez-y le rapport calculé ci-dessus

Insérer la description de l'image ici
effet réel :

Insérer la description de l'image ici
De cette façon, la taille px que vous saisissez sera automatiquement convertie en taille upx correspondante.

Choisissez simplement upx