WeChat mini-app css style media tag

This article mainly introduces the basic knowledge of small programs about css style media labels. For more information, see Basic knowledge of applets css style media labels

Preface:

In the applet, I met something new for me, but it is not a new knowledge for front-end development. The media tag in the html page is recorded here for emergency purposes.

Timeline style. This makes the document more print, such as increasing the page width or shielding unnecessary content.

 
  
 
@ Media all {body {font: 12px; width: 100% ;}@ media print {body {font: 14px; width: 595px ;} /* set the width to 595px (A4) when printing )*/}
The preceding media tag is the standard syntax in css. all browsers support media tags, but the following statements show that IE6 \ 7 \ 8 are supported by all 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;  } }
Someone is doing this.
@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; }}
Thank you for reading this article. I hope it will help you. thank you for your support for this site!
For more articles about small program css style media labels, please follow the PHP Chinese network!