Balise multimédia de style CSS de l'applet WeChat

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

Avant-propos :

J'ai rencontré un problème dans le mini-programme WeChat C'est quelque chose de nouveau pour moi, mais pas de nouvelles connaissances pour le développement front-end. La balise media dans la page html est enregistrée ici pour référence future

En CSS, nous utilisons la balise media pour la distinguer. appelez, par exemple, utilisez media="print" pour indiquer que lors de l'impression du document, utilisez le style print.css. 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".

tout – pour tous les types d'appareils
aural – pour les synthétiseurs vocaux et musicaux
braille – pour les appareils à retour tactile
gaufré – pour les appareils d'impression à caractères en relief (braille)
portatif – 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éscripteurs 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) */ 
}

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

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