长沙做互联网平台,长沙百度网站排名优化,网络组建拓扑图,射阳做网站公司文章目录 前言CSS3 多媒体查询实例520 到 699px 宽度 - 添加邮箱图标700 到 1000px - 添加文本前缀信息大于 1001px 宽度 - 添加邮件地址大于 1151px 宽度 - 添加图标代码后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;CSS #x1f43… 文章目录 前言CSS3 多媒体查询实例520 到 699px 宽度 - 添加邮箱图标700 到 1000px - 添加文本前缀信息大于 1001px 宽度 - 添加邮件地址大于 1151px 宽度 - 添加图标代码后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏CSS 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 CSS3 多媒体查询实例
本章节我们将为大家演示一些多媒体查询实例。
开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下
!DOCTYPE html
html
head
style
ul {list-style-type: none;
}ul li a {color: green;text-decoration: none;padding: 3px;display: block;
}
/style
/head
bodyullia data-emailjohndoeexample.com hrefmailto:johndoeexample.comJohn Doe/a/li lia data-emailmarymoeexample.com hrefmailto:marymoeexample.comMary Moe/a/li lia data-emailamandapandaexample.com hrefmailto:amandapandaexample.comAmanda Panda/a /li
/ul/body
/html注意 data-email 属性。在 HTML 中我们可以使用带 data- 前缀的属性来存储信息。
520 到 699px 宽度 - 添加邮箱图标
当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标
media screen and (max-width: 699px) and (min-width: 520px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}
}700 到 1000px - 添加文本前缀信息
当浏览器的宽度在 700 到 1000px, 会在邮箱链接前添加 Email: :
media screen and (max-width: 1000px) and (min-width: 700px) {ul li a:before {content: Email: ;font-style: italic;color: #666666;}
}大于 1001px 宽度 - 添加邮件地址
当浏览器的宽度大于 1001px 时会在链接后添加邮件地址接。
我们会使用 data- 属性来为每个人名后添加邮件地址
media screen and (min-width: 1001px) {ul li a:after {content: ( attr(data-email) );font-size: 12px;font-style: italic;color: #666666;}
}大于 1151px 宽度 - 添加图标
当浏览器的宽度大于 1001px 时会在人名前添加图标。
实例中我们没有编写额外的查询块我们可以在已有的查询媒体后使用逗号分隔来添加其他媒体查询 (类似 OR 操作符):
media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}
}代码
!DOCTYPE html
htmlheadstyleul {list-style-type: none;}ul li a {color: green;text-decoration: none;padding: 3px;display: block;}media screen and (max-width: 699px) and (min-width: 520px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}}media screen and (max-width: 1000px) and (min-width: 700px) {ul li a:before {content: Email: ;font-style: italic;color: #666666;}}media screen and (min-width: 1001px) {ul li a:after {content: ( attr(data-email) );font-size: 12px;font-style: italic;color: #666666;}}media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}}/style
/headbodyullia data-emailjohndoeexample.com hrefmailto:johndoeexample.comJohn Doe/a/li3lia data-emailmarymoeexample.com hrefmailto:marymoeexample.comMary Moe/a/lilia data-emailamandapandaexample.com hrefmailto:amandapandaexample.comAmanda Panda/a/li/ul/body/html后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
