响应式布局模板
<style>
*{
margin: 0;
padding: 0;
}
.comtainer {
height: 150px;
background-color: aqua;
margin:0 auto;
}
/* 1.小屏幕(宽度小于768px)下,宽度为100% */
@media screen and (max-width: 767px) {
.comtainer {
width: 100%;
}
}
/* 2.中屏幕下(宽度大于768px)下,宽度为750px */
@media screen and (min-width: 768px) {
.comtainer {
width: 750px;
}
}
/* 2.较大屏幕下(宽度大于992px)下,宽度为970px */
@media screen and (min-width: 992px) {
.comtainer {
width: 970px;
}
}
/* 2.大屏幕下(宽度大于1200px)下,宽度为1170px */
@media screen and (min-width: 1200px) {
.comtainer {
width: 1170px;
}
}