响应式布局----媒体查询

最新推荐文章于 2024-10-31 14:03:24 发布

Stirve unremitting

最新推荐文章于 2024-10-31 14:03:24 发布

阅读量94

点赞数

分类专栏：笔记文章标签： css css3 html html5

本文链接：https://blog.csdn.net/weixin_46421045/article/details/105071737

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.box{
				width: 100px;
				height: 100px;
				background: red;
			}
			
			/*
			
			媒体查询  判断一下浏览器的宽度是多少 
			决定box的背景颜色是多少
			700px <= x
			@media 设备 and (条件) and (条件){
				选择器{属性:值;}
			}
			*/
			@media all and (min-width:700px){
				.box{
					background: pink;
					width:300px;
					display:none;
				}
			}
			@media all and (min-width: 1000px){
				.box{
					background: purple;
					width:400px;
					display:block;
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>