Maison > Article > Applet WeChat > 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
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!