<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
width: 1000px;
height: 1000px;
background-color: pink;
margin: 0 auto;
}
/* 使用媒体查询，能针对不同屏幕区间设置不同的布局和样式 */
/* 怎么使用媒体查询 */
/* @media */
/* 语法 @media screen and (max-width:768px) and (min-width:320px){样式属性} */
@media screen and (max-width:768px) {
/* 在超小屏的时候 小于768px，当前的容器的宽度100% 背景设置成蓝色 */
.container {
width: 100%;
height: 1000px;
background: blue;
margin: 0 auto;
}
}
@media screen and (min-width:768px) and (max-width:992px) {
/* 在小屏设备的时候 768到992px，当前容器的宽度750px 背景设置为绿色 */
.container {
width: 750px;
height: 1000px;
background: lawngreen;
margin: 0 auto;
}
}
@media screen and (min-width:992px) and (max-width:1200px) {
/* 在中屏设备的时候 992到1200px，当前容器的宽度为 970px 背景设置为黄色 */
.container {
width: 970px;
height: 1000px;
background: yellow;
margin: 0 auto;
}
}
@media screen and (min-width:1200px){
/* 在中屏设备的时候 992到1200px，当前容器的宽度为 970px 背景设置为黄色 */
.container {
width: 1170px;
height: 1000px;
background: red;
margin: 0 auto;
}
}
</style>
</head>
<body>
<!--
响应式容器
在超小屏的时候 小于768px，当前的容器的宽度100% 背景设置成蓝色
在小屏设备的时候 768到992px，当前容器的宽度750px 背景设置为绿色
在中屏设备的时候 992到1200px，当前容器的宽度为 970px 背景设置为黄色
在大屏设备的时候，1200px以上， 当前容器的宽度为 1170px 背景颜色设置为红色
-->
<div class="container">
</div>
</body>
</html>