响应式布局模板

响应式布局模板

<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;
  }
}