Ausführliche Erläuterung der Rpx-Größeneinheit und Stilverwendung des WeChat Mini-Programms

In diesem Artikel werden hauptsächlich die relevanten Informationen zur Rpx-Größeneinheit und den Stildetails des WeChat-Applets vorgestellt. Er kann jedem bei der Entwicklung des WeChat-Applets helfen und Probleme mit der Mobiltelefongröße vermeiden Als Referenz:

WeChat Mini-Programmgrößeneinheit

rpx-Einheit ist die Größeneinheit von CSS im WeChat Mini-Programm, die entsprechend der 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 750 Pixel = 375 Pixel = 750 physische Pixel, 1 Pixel = 0,5 Pixel = 1 physisches Pixel.

Das WeChat-Applet unterstützt auch die Rem-Größeneinheit, die Konvertierungsbeziehung zwischen rem und rpx: rem: Die angegebene Bildschirmbreite beträgt 20rem 1rem = (750/20) rpx
Hinweis: Bei der Entwicklung von WeChat-Applets können Designer das iPhone6 ​​als Standard für visuelle Entwürfe 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, bleibt Rem dem Miniprogramm überlassen, sich selbst zu konvertieren

So importieren Sie den Stil des Miniprogramms

Verwenden Sie @import Anweisung zum Importieren des externen Stylesheets. 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;
}

Einführung in Miniprogramm-Inline-Stile

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 zum Angeben von Stilregeln verwendet. Der Attributwert ist eine Sammlung von Klassenselektornamen (Stilklassennamen) in den Stilregeln. zwischen den Stilklassennamen durch Leerzeichen trennen.

<view class="normal_view" />

WeChat-Applet-CSS-Selektor

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

Selektor

Beispiel

Beispielbeschreibung

Globale Stile und lokale Stile des Applets

Die in app.wxss definierten 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.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Rpx-Größeneinheit und Stilverwendung des WeChat Mini-Programms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!