Basic knowledge of mini programs and detailed explanation of css style media tags

微信小程序 基础知识css样式media标签

前言：

微信小程序中我遇到了一个对我来说是新的东西，但是对于前端开发来说不算是新知识，html页面中的media标签，在此记录下来以备不时之需

在css中我们使用media标签来区分调用哪个css样式，比如使用media=”print”来表示当执行打印文档时，使用print.css样式。这样使得文档更有得于打印，如将页面宽度增宽、或屏蔽掉一些不需要打印的内容。

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

下边是media标签的10个值，可见常用的并不多。当没有media标签时，默认为media=”all”。

all– 用于所有设备类型

aural– 用于语音和音乐合成器

braille– 用于触觉反馈设备

embossed– 用于凸点字符（盲文）印刷设备

handheld– 用于小型或手提设备

print– 用于打印机

projection– 用于投影图像，如幻灯片

screen– 用于计算机显示器

tty– 用于使用固定间距字符格的设备。如电传打字机和终端

tv– 用于电视类设备

在上边引用css样式时，我们引用了两次。我们完全可以引用一个css样式来达到我们的目的，这样也可以提高css样式加载速度,

实现代码如下：

CSS代码

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


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

以上media标签是css中的标准语法，所有浏览器都支持media标签，但下面的写法出IE6\7\8 以为的浏览器都支持

CSS代码

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

The above is the detailed content of Basic knowledge of mini programs and detailed explanation of css style media tags. For more information, please follow other related articles on the PHP Chinese website!