WeChat Mini-Programm-RPX-Einheit

Die rpx-Einheit ist die Größeneinheit von CSS im WeChat-Applet, die je nach Bildschirmbreite angepasst werden kann. Die angegebene Bildschirmbreite beträgt 750 rpx. Auf dem iPhone6 ​​beträgt die Bildschirmbreite beispielsweise 375 Pixel und es gibt insgesamt 750 physische Pixel, dann ist 750 rpx = 375 px = 750 physische Pixel, 1 rpx = 0.

Die Größeneinheit des WeChat-Applets

Die Rpx-Einheit ist WeChat. Die Größeneinheit von CSS im Applet, Rpx, kann entsprechend der Bildschirmbreite angepasst werden. Die angegebene Bildschirmbreite beträgt 750 rpx. Auf dem iPhone6 ​​beträgt die Bildschirmbreite beispielsweise 375 Pixel und es gibt insgesamt 750 physische Pixel, dann 750 Pixel = 375 Pixel = 750 physische Pixel, 1 Pixel = 0,5 Pixel = 1 physisches Pixel.

设备	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

Das WeChat-Applet unterstützt auch die Rem-Größeneinheit, die Konvertierungsbeziehung zwischen rem und rpx: rem: Die angegebene Bildschirmbreite beträgt 20rem = (750/20)rpx
Hinweis: Entwicklungsdesigner können das iPhone6 ​​als Standard für visuelle Entwürfe bei der Entwicklung von WeChat-Miniprogrammen verwenden.
Vorschlag: Es ist einfacher, den Entwurfsentwurf zu berechnen, indem man eine Gerätebreite von 750 Pixel verwendet. In diesem Fall ist die auf der Entwurfszeichnung gemessene Größe die Anzahl der Pixel von rpx. Was die eigentliche Konvertierung auf verschiedenen Geräten angeht, wird rem dem Miniprogramm überlassen, um es selbst zu konvertieren

Stilimport des Miniprogramms

Verwenden Sie die @import-Anweisung, um Importieren Sie das externe Stylesheet. Auf @import folgt das externe Stylesheet, das importiert werden muss. Relativer Pfad, verwenden Sie, um das Ende der Anweisung anzugeben.

Beispielcode:

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

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

Miniprogramm-Inline-Stil

Frame-Komponenten unterstützen die Verwendung von Stil- und Klassenattributen, um den Stil der Komponente zu steuern.

• Stil: Statische Stile werden im Unterricht einheitlich geschrieben. style empfängt dynamische Stile und analysiert sie zur Laufzeit. Bitte vermeiden Sie das Schreiben statischer Stile in style, um die Rendering-Geschwindigkeit nicht zu beeinträchtigen.

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

• Klasse: Wird zur Angabe von Stilregeln verwendet. Der Attributwert ist eine Sammlung von Klassenselektornamen (Stilklassennamen) in Stilregeln Es ist nicht erforderlich, „.“ in den Namen aufzunehmen, und Stilklassennamen sollten durch Leerzeichen getrennt werden.

<view class="normal_view" />

CSS-Selektor

Die derzeit vom WeChat-Applet unterstützten Selektoren sind:

选择器	样例	样例描述
.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 组件前边插入内容

Der globale Stil und der lokale Stil des Die in app.wxss definierten Applet-Stile

sind globale Stile und gelten für jede Seite. Die in der WXSS-Datei der Seite definierten Stile sind lokale Stile, die nur für die entsprechende Seite gelten und denselben Selektor in app.wxss überschreiben.

Weitere Artikel zur Rpx-Einheit des WeChat-Miniprogramms finden Sie auf der chinesischen PHP-Website!