Heim >WeChat-Applet >Mini-Programmentwicklung >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'/>
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!