Unité rpx du mini-programme WeChat

L'unité rpx est l'unité de taille du CSS dans l'applet WeChat rpx qui peut être adaptée en fonction de la largeur de l'écran. La largeur d'écran spécifiée est de 750rpx. Par exemple, sur iPhone6, la largeur de l'écran est de 375px et il y a 750 pixels physiques au total, alors 750rpx = 375px = 750 pixels physiques, 1rpx = 0.

L'unité de taille de l'applet WeChat

L'unité rpx est WeChat. L'unité de taille du CSS dans le mini programme, rpx peut être adaptée en fonction de la largeur de l'écran. La largeur d'écran spécifiée est de 750rpx. Par exemple, sur iPhone6, la largeur de l'écran est de 375px et il y a 750 pixels physiques au total, alors 750rpx = 375px = 750 pixels physiques, 1rpx = 0,5px = 1 pixel physique.

L'applet WeChat prend également en charge l'unité de taille rem, la relation de conversion entre rem et rpx : rem : la largeur d'écran spécifiée est 20rem = (750/20)rpx
Remarque : Les concepteurs de développement peuvent utiliser l'iPhone6 ​​​​comme standard pour les brouillons visuels lors du développement de mini-programmes WeChat.
Suggestion : Il est plus facile de calculer le brouillon de conception en utilisant une largeur d'appareil de 750 px. Si 750 px est utilisé, 1rpx=1px. Dans ce cas, la taille mesurée sur le dessin de conception est le nombre de px, c'est-à-dire le nombre. de rpx. Quant à la conversion réelle sur différents appareils, rem est laissé au mini programme de convertir par lui-même

Importation de style du mini programme

Utilisez l'instruction @import pour importez la feuille de style externe, @import est suivi de la feuille de style externe qui doit être importée Chemin relatif, utilisez pour indiquer la fin de l'instruction.

Exemple de code :

/** common.wxss **/.small-p {  padding:5px;
}

/** app.wxss **/
@import "common.wxss";.middle-p {  padding:15px;
}

Style en ligne du mini-programme

Les composants de cadre prennent en charge l'utilisation d'attributs de style et de classe pour contrôler le style du composant.

• style : les styles statiques sont écrits uniformément en classe. style reçoit des styles dynamiques et les analysera au moment de l'exécution. Veuillez essayer d'éviter d'écrire des styles statiques dans style pour éviter d'affecter la vitesse de rendu.

<view style="color:{{color}};" />

• classe : utilisée pour spécifier les règles de style. Sa valeur d'attribut est une collection de noms de sélecteur de classe (noms de classe de style) dans la classe de style. Il n'est pas nécessaire d'inclure "." dans le nom et les noms de classes de style doivent être séparés par des espaces.

<view class="normal_view" />

sélecteur css

Les sélecteurs actuellement pris en charge par l'applet WeChat sont :

Le style global et le style local du Les styles d'applet

définis dans app.wxss sont des styles globaux et s'appliquent à chaque page. Les styles définis dans le fichier wxss de la page sont des styles locaux, qui s'appliquent uniquement à la page correspondante et remplaceront le même sélecteur dans app.wxss.

Pour plus d'articles liés à l'unité rpx du mini programme WeChat, veuillez faire attention au site Web PHP chinois !