Medien-Tag im CSS-Stil des WeChat-Applets

Grundkenntnisse des Medientags im CSS-Stil des WeChat-Miniprogramms

Vorwort:

Ich bin auf ein Problem im WeChat-Miniprogramm gestoßen Es ist etwas Neues für mich, aber kein neues Wissen für die Frontend-Entwicklung. Das Medien-Tag in der HTML-Seite wird hier zum späteren Nachschlagen aufgezeichnet.

In CSS verwenden wir das Medien-Tag, um zu unterscheiden, welcher CSS-Stil aufgerufen werden soll Verwenden Sie beispielsweise media="print", um anzugeben, dass beim Drucken des Dokuments der print.css-Stil verwendet werden soll. 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;
 }
}

Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Seite!

Weitere Artikel zu WeChat-Applet-Medien-Tags im CSS-Stil finden Sie auf der chinesischen PHP-Website!