介绍, lt; link href=https://www.yisu.com/zixun/胺绺?main.css”rel=巴獠縩ofollow”rel="样式表" type=" text/css "媒体="屏幕"/>
<链接的href="风格/打印。css " rel="外部nofollow”rel="样式表" type=" text/css "媒体="打印"/>
<链接主要href="。css " rel="外部nofollow”rel="样式表" type=" text/css "媒体="所有"/> @media all {,
,,,,,,,身体{,字体:12 px;,宽度:100%;},
,,},
@media print
{,
身体才能{,字体:14 px;,宽度:595 px;},,/*,用于打印时将宽度设置为595 px (A4), */,
} @media all 以及(min-width: 1001 px), {,
,# sidebar ul li : after {,
,,内容:“,(“,attr (data-email),“),,,
,,字体大小:11 px;,
字体样式:才能,斜体,,
,,颜色:# 666;,
}大敌;
},
@media all 以及(max-width: 1000像素),以及(min-width: 700 px), {,
,# sidebar ul li : before {,
,,内容:“电子邮件:,,,,
字体样式:才能,斜体,,
,,颜色:# 666;,
}大敌;
},
@media all 以及(max-width: 699像素),以及(min-width: 520 px), (min-width: 1151 px), {,
,# sidebar ul li a {,
,,padding-left: 21 px;,
,,背景:url(. ./图片/email.png), left center 没有重演,,
}大敌;
} @media screen 以及(-webkit-min-device-pixel-ratio: 1.0),, screen 以及(1.0分钟——moz-device-pixel-ratio:,),, screen 以及(min-device-pixel-ratio: 1.0),, screen 以及(dppx min-resolution: 1.0), {
.icon-del {才能
背景图片:url(. ./. ./资源/图片/ui_3@2x.png);
background-size: 274年,px 228 px;
显示:块;
,}
}
这篇文章主要介绍了小程序中媒体标签的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
<强>微信小程序基础知识css样式媒体标签
<强>前言:
微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中媒体的标签,在此记录下来以备不时之需
在css中我们使用媒体标签来区分调用哪个css样式,比如使用媒体=按蛴 崩幢硎镜敝葱写蛴∥牡凳?使用打印。css样式。这样使得文档更有得于打印,如将页面宽度增宽,或屏蔽掉一些不需要打印的内容。
下边是媒体标签的10个值,可见常用的并不多。当没有媒体标签时,默认为媒体="所有" .
——用于所有设备类型
听觉——用于语音和音乐合成器
盲文,用于触觉反馈设备
压花,用于凸点字符(盲文)印刷设备
手持——用于小型或手提设备
打印,用于打印机
投影,用于投影图像,如幻灯片
屏幕,用于计算机显示器
tty——用于使用固定间距字符格的设备,如电传打字机和终端
电视——用于电视类设备
在上边引用css样式时,我们引用了两次。我们完全可以引用一个css样式来达到我们的目的,这样也可以提高css样式加载速度,
实现代码如下:
CSS代码
以媒体上标签是css中的标准语法,所有浏览器都支持媒体标签,但下面的写法出IE6 \ 7 \ 8以为的浏览器都支持
CSS代码
也有人这么搞
感谢你能够认真阅读完这篇文章,希望小编分享的“小程序中媒体标签的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
