HTML5 响应式网页设计之页面美化（二.媒体查询）

最新推荐文章于 2022-11-19 15:33:59 发布

积沙成塔——

最新推荐文章于 2022-11-19 15:33:59 发布

阅读量425

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/qq_45308912/article/details/120644014

版权

1.媒体查询

媒体查询可以为不同媒介的类型设置不同的样式，大部分媒体特性都接受min和max属性

只有当<meta name="viewport">视口标签存在的时候，才能使用媒体查询@media标签来实现分辨率的不同进行调用不同的样式
在这里插入图片描述

2.媒体查询语法及两种使用方式

后续开发使用最多的是link链入媒体查询
在这里插入图片描述
第一种：在样式表中内嵌媒体查询 @media

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			.header {
				background-color: orange;
				color: white;
				padding-left: 15px;
				font-size: 20px;
			}
			.nav {
				background-color: #949694;
				color: white;
				height: 30px;
				line-height: 30px;
				padding-left: 20px;
			}
			.nav ul {
				list-style: none;
				/* background-color: green; */
			}
			.nav ul li {
				width: 100px;
				/* background-color: red; */
				float: left;
			}
		
			@media all and (max-width: 1024px) {
				/* 适合普通分辨率桌面浏览器和横屏的ipad */
				.nav {
					background-color: pink;
				}				
			}
			@media all and (max-width: 768px) {
				/* 适合很低分辨率桌面浏览器和竖屏ipad */
				.nav {
					background-color: skyblue;
				}
			}
			@media all and (max-width: 480px), all and (max-width: 320px) {
				/* 适合iphone和Android */
				.nav {
					background-color: yellowgreen;
				}
				.nav li a {
					display: none;
				}
			}
			@media all and (max-width: 240px) {
				/* 适合低分辨率移动设备 */
				.nav {
					display: none;
				}
			}
		</style>
	</head>
	<body>
		<div class="header">
			<h1>购乐乐后台管理</h1>
		</div>
		<div class="nav">
			<ul>
				<li>后台首页</li>
				<li><a href="#">商品管理</a></li>
				<li><a href="#">订单管理</a></li>
				<li><a href="#">评论管理</a></li>
				<li><a href="#">广告管理</a></li>
				<li><a href="#">系统管理</a></li>
			</ul>
		</div>
	</body>
</html>

第二种：在link链入样式中使用媒体查询 @media

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/landspace%20iPad.css" media="all and (max-width: 1024px)">
		<link rel="stylesheet" href="css/vertical%20iPad.css" media="all and (max-width: 768px)">
		<link rel="stylesheet" type="text/css" href="css/iPhoneOrAndroid.css" media="all and (max-width: 480px),all and (max-width: 320px)" />
		<link rel="stylesheet" type="text/css" href="css/move.css" media="all and (max-width: 240px)">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			.header {
				background-color: orange;
				color: white;
				padding-left: 15px;
				font-size: 20px;
			}

			.nav {
				background-color: #949694;
				color: white;
				height: 30px;
				line-height: 30px;
				padding-left: 20px;
			}

			.nav ul {
				list-style: none;
				/* background-color: green; */
			}

			.nav ul li {
				width: 100px;
				/* background-color: red; */
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<h1>购乐乐后台管理</h1>
		</div>
		<div class="nav">
			<ul>
				<li>后台首页</li>
				<li><a href="#">商品管理</a></li>
				<li><a href="#">订单管理</a></li>
				<li><a href="#">评论管理</a></li>
				<li><a href="#">广告管理</a></li>
				<li><a href="#">系统管理</a></li>
			</ul>
		</div>
	</body>
</html>

积沙成塔——

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 响应式网页设计之页面美化（二.媒体查询）

1.媒体查询媒体查询可以为不同媒介的类型设置不同的样式，大部分媒体特性都接受min和max属性只有当<meta name="viewport">视口标签存在的时候，才能使用媒体查询@media标签来实现分辨率的不同进行调用不同的样式2.媒体查询语法及两种使用方式...
复制链接

扫一扫