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'/>
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!
