Introduction to CSS style media tags in WeChat mini programs

This article mainly introduces the relevant information about the basic knowledge of WeChat Mini Program css style media tag. Friends who need it can refer to

Basic knowledge of WeChat Mini Program css style media tag

Foreword:

I encountered something new to me in the WeChat applet, but it is not new knowledge for front-end development. In the html page The media tag, record it here for future reference

In css, we use the media tag to distinguish which css style is called, for example, use media="print" to indicate that when printing a document, use print .css styles. 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 character grids. 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;
 }
}

Above That’s the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to obtain data in javascript in WeChat applet

nodejs develops WeChat applet to implement passwords encryption

The above is the detailed content of Introduction to CSS style media tags in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!