Detaillierte Erklärung der Stile in uni-app

Stile in uni-app

• Das Sass-Plugin muss von der offiziellen Website heruntergeladen werden. Folgen Sie einfach den Anweisungen
• rpx steht für responsive px, eine dynamische Einheit, die sich an die Bildschirmbreite anpasst. Wenn man einen 750-Zoll-Bildschirm als Maßstab nimmt, entspricht 750rpx genau der Bildschirmbreite. Wenn der Bildschirm breiter wird, wird der tatsächliche Anzeigeeffekt von rpx proportional vergrößert.
• Verwenden Sie die Anweisung @import , um ein externes Stylesheet zu importieren. Auf @import folgt der relative Pfad des zu importierenden externen Stylesheets und ; zeigt das Ende der Anweisung an.
• Die in App.vue definierten Stile sind globale Stile und gelten für jede Seite. Die in der Vue-Datei im Seitenverzeichnis definierten Stile sind lokale Stile, die nur für die entsprechenden Seiten gelten und denselben Selektor in App.vue überschreiben.

uni-app unterstützt die Verwendung von Schriftsymbolen. Die Verwendung erfolgt wie bei gewöhnlichen Webprojekten. Bitte beachten Sie folgende Punkte :

• Wenn die Schriftdatei kleiner als 40 KB ist, konvertiert uni-app sie automatisch in das Base64-Format.
  
• Die Schriftdatei ist größer oder gleich 40 KB und der Entwickler muss sie selbst konvertieren, sonst ist die Konvertierung nicht wirksam.
  
• Es wird empfohlen, für den Referenzpfad der Schriftartdatei einen absoluten Pfad zu verwenden, der mit ~@ beginnt.

<Vorlage>
	<Ansicht>
		<Ansicht>
			Stillernen </view>
		<Klasse anzeigen="Box1">
			Testtext <text>123</text>
		</Ansicht>
		<Ansichtsklasse="iconfont icon-shipin">
		</Ansicht>
	</Ansicht>
</Vorlage>
<Skript>
</Skript>
<style lang="scss">
	@import url("./a.css"); // Externe CSS-Datei importiert .box1{
		Breite: 350rpx; //rpx kann nicht nur für Boxen, sondern auch für Text verwendet werden Höhe: 350rpx;
		Hintergrund: rot;
		Schriftgröße: 50rpx;
		Farbe: #FFFFFF;
		Text{
			Farbe: rosa;
		}
	}
</Stil>

Definieren Sie allgemeine globale Stile in App.vue

<Stil>
	/*Gemeinsames CSS für jede Seite */
	//Globaler Stil wird durch lokalen Stil überschrieben @import url("./static/fonts/iconfont.css");
	.box1{
		Hintergrund: rosa;
	}
</Stil>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!