Einführung in Medien-Tags im CSS-Stil in WeChat-Miniprogrammen

In diesem Artikel werden hauptsächlich relevante Informationen zu den Grundkenntnissen des WeChat-Miniprogramms im CSS-Stil-Medien-Tag vorgestellt. Freunde, die diese benötigen, können sich auf

Grundkenntnisse des WeChat-Mini-Programms im CSS-Stil-Medien-Tag

Vorwort:

Ich bin im WeChat-Applet auf etwas Neues gestoßen, aber es ist kein neues Wissen für die Front-End-Entwicklung im HTML-Seiten-Medien-Tag , notieren Sie es hier zum späteren Nachschlagen

In CSS verwenden wir das Media-Tag, um zu unterscheiden, welcher CSS-Stil aufgerufen wird. Verwenden Sie beispielsweise media="print", um anzugeben, dass beim Drucken eines Dokuments print .css verwendet wird Stile. Dadurch wird das Dokument besser druckbar, z. B. durch Verbreiterung der Seitenbreite oder Ausblenden einiger Inhalte, die nicht gedruckt werden müssen.

<link href="styles/main.css" rel="external nofollow" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/print.css" rel="external nofollow" rel="stylesheet" type="text/css" media="print" /> 
<link href="main.css" rel="external nofollow" rel="stylesheet" type="text/css" media="all&#39;/>

Nachfolgend sind die 10 Werte des Medien-Tags aufgeführt. Es ist ersichtlich, dass es nicht viele häufig verwendete Werte gibt. Wenn kein Medien-Tag vorhanden ist, ist der Standardwert media="all".

alle – für alle Gerätetypen

akustisch – für Sprach- und Musiksynthesizer
Braille – für Geräte mit taktiler Rückmeldung
geprägt – für Druckgeräte mit erhabenen Zeichen (Braille)
Handgerät – für kleine oder tragbare Geräte
Drucken – für Drucker
Projektion – zum Projizieren von Bildern wie Dias
Bildschirm – für Computermonitore
TTY – zur Verwendung mit festem A-Gerät für den Abstand von Zeichenrastern. Wie zum Beispiel Fernschreibmaschinen und Terminals
tv – wird für Fernsehgeräte verwendet

Beim Zitieren des CSS-Stils oben haben wir ihn zweimal zitiert. Wir können vollständig auf einen CSS-Stil verweisen, um unseren Zweck zu erreichen, was auch die Ladegeschwindigkeit des CSS-Stils verbessern kann

Der Implementierungscode lautet wie folgt:

CSS-Code

@media all { 
        body{ font:12px; width:100%;} 
   } 

@media print 
{ 
  body{ font:14px; width:595px;}  /* 用于打印时将宽度设置为595px(A4) */ 
}

Das obige Medien-Tag ist die Standardsyntax in CSS. Alle Browser unterstützen das Medien-Tag, aber die folgende Schreibmethode unterscheidet sich meiner Meinung nach von allen Browsern >

CSS-Code

@media all and (min-width: 1001px) { 
 #sidebar ul li a:after { 
  content: " (" attr(data-email) ")"; 
  font-size: 11px; 
  font-style: italic; 
  color: #666; 
 } 
} 

@media all and (max-width: 1000px) and (min-width: 700px) { 
 #sidebar ul li a:before { 
  content: "Email: "; 
  font-style: italic; 
  color: #666; 
 } 
} 

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { 
 #sidebar ul li a { 
  padding-left: 21px; 
  background: url(../images/email.png) left center no-repeat; 
 } 
}

Manche Leute machen das auch

@media screen and (-webkit-min-device-pixel-ratio: 1.0), screen and (min--moz-device-pixel-ratio: 1.0), screen and (min-device-pixel-ratio: 1.0), screen and (min-resolution: 1.0dppx) {
  .icon-del {
background-image: url(../../resources/images/ui_3@2x.png);
background-size: 274px 228px;
display: block;
 }
}

Das ist alles für den Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So erhalten Sie Daten in Javascript im WeChat-Applet

nodejs entwickelt ein WeChat-Applet zur Implementierung der Passwortverschlüsselung

Das obige ist der detaillierte Inhalt vonEinführung in Medien-Tags im CSS-Stil in WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!