CSS3 多媒体查询实例

最新推荐文章于 2022-04-14 16:48:19 发布

冷月醉雪

最新推荐文章于 2022-04-14 16:48:19 发布

阅读量1.6k

点赞数

分类专栏： CSS3 文章标签： CSS3 多媒体

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80771993

版权

本文介绍了如何使用CSS3的多媒体查询实现不同屏幕尺寸下的布局变化。例如，在520到699px宽度下为邮箱链接添加图标，700到1000px时显示"Email:"前缀，超过1001px宽度则展示完整邮件地址，且在1151px以上宽度时人名前添加图标。通过data-属性存储信息，实现响应式设计。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			ul {
				list-style-type: none;
			}

			ul li a {
				color: green;
				text-decoration: none;
				padding: 3px; 
				display: block;
			}
		</style>
	</head>
	<body>
		<ul>
		  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
		  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
		  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
		</ul>
	</body>
</html>

注意 data-email 属性。在 HTML 中我们可以使用带 data- 前缀的属性来存储信息。

520 到 699px 宽度 - 添加邮箱图标

当浏览器的宽度在 520 到 699px, 邮箱链接前添加邮件图标：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			ul {
				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(img_tree.png) left center no-repeat;
				}
			}
		</style>
	</head>
	<body>
		<h1>重置浏览器窗口，查看效果!</h1>
		
		<ul>
		  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
		  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a

最低0.47元/天解锁文章

冷月醉雪

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3 多媒体查询实例

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;style&gt; ul { list-style-type: none; } ul
复制链接

扫一扫