WeChat applet css style media tag

Basic knowledge of WeChat mini program css style media tag

Foreword:

I encountered a problem in the WeChat mini program It is something new to me, but not new knowledge to front-end development. The media tag in the html page is recorded here for future reference.

In css we use the media tag to distinguish Which css style to call, for example, use media="print" to indicate that when printing the document, use the print.css style. This makes the document more printable, such as widening the page width or blocking out some content that does not need to be printed.

 

all – for all device types 
aural – for speech and music synthesizers 
braille – for tactile feedback devices 
embossed – for raised character (braille) printing devices 
handheld – for small or handheld devices 
print – for printers 
projection – for projecting images such as slides 
screen – for computer monitors 
tty – for use with fixed A device for spacing characters. Such as teletypewriters and terminals 
tv– used for television equipment 

When quoting the css style above, we quoted it twice. We can completely reference a css style to achieve our purpose, which can also improve the css style loading speed. 
The implementation code is as follows: 

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

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

The above media tag is the standard syntax in CSS. All browsers support the media tag, but the following writing method is not supported by IE6\7\8 browsers

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

Some people do this too
@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;
 }
}

Thanks Reading, I hope it can help everyone, thank you for your support of this site! 
For more articles related to WeChat applet css style media tags, please pay attention to the PHP Chinese website!