Introduction aux balises multimédias de style CSS dans les mini-programmes WeChat

Cet article présente principalement des informations pertinentes sur les connaissances de base de la balise multimédia de style CSS du mini programme WeChat. Les amis qui en ont besoin peuvent se référer à

Connaissances de base de la balise multimédia de style CSS du mini programme WeChat

Avant-propos :

J'ai rencontré quelque chose de nouveau pour moi dans l'applet WeChat, mais ce n'est pas une nouvelle connaissance pour le développement front-end dans la balise média de la page html. , enregistrez-le ici pour référence future

En CSS, nous utilisons la balise media pour distinguer quel style CSS est appelé, par exemple, utilisez media="print" pour indiquer que lors de l'impression d'un document, utilisez print .css styles. Cela rend le document plus imprimable, par exemple en élargissant la largeur de la page ou en bloquant certains contenus qui n'ont pas besoin d'être imprimés.

<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;/>

Vous trouverez ci-dessous les 10 valeurs​​de la balise média. On voit qu'il n'y en a pas beaucoup qui sont couramment utilisées. Lorsqu'il n'y a pas de balise multimédia, la valeur par défaut est media="all".

tous – pour tous les types d'appareils

aural – pour les synthétiseurs vocaux et musicaux
braille – pour les appareils à retour tactile
en relief – pour les appareils d'impression à caractères en relief (braille)
portatifs – pour appareils petits ou portables
impression – pour imprimantes
projection – pour projeter des images telles que des diapositives
écran – pour écrans d'ordinateur
tty – à utiliser avec un appareil fixe pour espacer les grilles de caractères. Tels que les téléimprimeurs et les terminaux
télévision – utilisés pour les équipements de télévision

Lorsque nous citons le style CSS ci-dessus, nous l'avons cité deux fois. Nous pouvons référencer complètement un style CSS pour atteindre notre objectif, ce qui peut également améliorer la vitesse de chargement du style CSS

Le code d'implémentation est le suivant :

Code CSS

<.>

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

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

La balise media ci-dessus est la syntaxe standard en CSS. Tous les navigateurs prennent en charge la balise media, mais la méthode d'écriture suivante est différente de celle d'IE678.

Code CSS

@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; 
 } 
}

Certaines personnes font ça aussi

@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;
 }
}

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment obtenir des données en javascript dans l'applet WeChat

nodejs développe l'applet WeChat pour implémenter le cryptage des mots de passe

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!