Explication détaillée de l'unité de taille rpx et de l'utilisation du style du mini-programme WeChat

Cet article présente principalement les informations pertinentes sur l'unité de taille rpx et l'introduction détaillée du style des mini-programmes WeChat. Il peut efficacement aider tout le monde à développer des mini-programmes WeChat et à éviter les problèmes de taille de téléphone portable. qui en a besoin peut Pour référence,

Unité de taille du mini programme WeChat

l'unité rpx est l'unité de taille du CSS dans le mini programme 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,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 : lors du développement d'applets WeChat, les concepteurs peuvent utiliser l'iPhone6 ​​​​​​comme standard pour les brouillons visuels.
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 se convertir

Comment importer le style du mini programme

Utilisez le @import instruction pour importer 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;
}

Introduction aux styles 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}};" />

class : utilisé 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 les règles de style. Le nom de la classe de style n'a pas besoin d'être accompagné de., entre les noms de classe de style.

<view class="normal_view" />

Sélecteur CSS de l'applet WeChat

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

Sélecteur

Échantillon

Exemple de description

Styles globaux et styles locaux de l'applet

Les styles définis dans app.wxss sont des styles globaux et s'appliquent à tout le monde sur une 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.

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!