css3中的媒体查询

qq小小布丁

于 2016-10-20 18:06:00 发布

阅读量222

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/u012841667/article/details/52875493

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

实现

默认header为红色；sliderbar为绿色，固定宽度为200px；footer为蓝色

当屏幕小于600px时，显示三列

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>媒体查询</title>
	<style>
		.header{
			background-color: red;
			float:left;
			height:20px;
			width:50%;
		}
		.sliderbar{
			background-color:green;
			width:200px;
			float:left;
			height:20px;
		}
		.footer{
			background-color:blue;
			height:20px;
			clear: both;
			width:100%;
		}
		@media screen and (max-width:600px){
			.header{
				width:100%;
			}
			.sliderbar{
				width:100%;
			}
		}
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="sliderbar"></div>
	<div class="footer"></div>
</body>
</html>