@media媒体查询的使用方法及注意事项

.customContainer{
	height: 40px;
	margin: 0 auto;
	background-color: purple;
}

@media screen and (max-width: 768px){
	.customContainer{
		width: 100%;
	}
}

@media screen and (min-width: 768px) and (max-width: 992px){
	.customContainer{
		width: 750px;
	}
}

@media screen and (min-width: 992px) and (max-width: 1200px){
	.customContainer{
		width: 970px;
	}
}

<div class="customContainer"></div>

注意：‘and’后一定要加空格，否则媒体查询无效