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.

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

Below are the 10 values ​​​​of the media tag. It can be seen that there are not many commonly used ones. When there is no media tag, the default is media="all".

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!