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.

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

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 :

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

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 !