Introduction à WXSS dans le programme WeChat Mini

Cet article présente principalement les informations pertinentes de l'applet WeChat WXSS et joint un exemple de code simple. Les amis dans le besoin peuvent se référer à

WXSS

WXSS (WeiXin Style). Sheets) est un langage de style conçu par MINA pour décrire les styles de composants WXML.

WXSS est utilisé pour déterminer comment les composants WXML doivent être affichés.

Afin de s'adapter à la majorité des développeurs front-end, notre WXSS possède la plupart des fonctionnalités du CSS. Dans le même temps, afin d'être plus adapté au développement d'applets WeChat, nous avons étendu et modifié le CSS.

Par rapport au CSS, nos fonctionnalités étendues incluent :

Unité de dimension
Importation de style

Unité de taille

rpx (responsive pixel) : peut être adapté en fonction de la largeur de l'écran. La largeur d'écran spécifiée est de 750rpx. Par exemple, sur iPhone 6, la largeur de l'écran est de 375 pixels 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.34px
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

rem (root em) : La largeur d'écran spécifiée est de 20rem ; 1rem = (750/20)rpx.

Suggestion : lors du développement de mini-programmes WeChat, les concepteurs peuvent utiliser l'iPhone6 ​​​​​​comme standard pour les brouillons visuels.

Importation de style

Utilisez l'instruction @import pour importer une feuille de style externe @import est suivi du chemin relatif de la feuille de style externe qui doit être importée. . 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

Les composants MINA 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 dans les classes. style reçoit des styles dynamiques et les analysera au moment de l'exécution, n'écrivez donc pas de styles statiques dans style pour éviter d'affecter la vitesse de rendu.

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

classe : utilisée pour spécifier des règles de style. Sa valeur d'attribut est une collection de noms de sélecteurs de classe (noms de classe de style) dans les règles de style. ., classe de style. Séparez les noms par des espaces.

<view class="normal_view" />

Sélecteur

Les sélecteurs actuellement pris en charge 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组件前边插入内容

Style global et style local

Les styles 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.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction au curseur du mini-programme WeChat

À propos de la mise en œuvre du mini-programme WeChat de l'onglet supérieur (swiper) Introduction

À propos de la fonction de WeChat JS-SDK de sélection des téléchargements de photos sur téléphone mobile

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!