响应式ContainerCSS设计_b-container 响应式-优快云博客

本文介绍了一种使用CSS实现响应式布局的方法，通过不同屏幕尺寸下的容器宽度调整来确保页面元素能够在各种设备上正确显示。从最小高度设置到媒体查询的应用，详细解释了如何根据不同设备类型调整布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.tiansjContainer{
  min-height: 1200px;
  margin: 0 auto;
}
.tiansjContainer-fluid{
  min-height: 1200px;
  margin: 0 auto;
  width: 100%;
}
.tiansjContainer-sm{
  min-height: 1200px;
  margin: 0 auto;
}
.tiansjContainer-md{
  min-height: 1200px;
  margin: 0 auto;
}

.tiansjContainer-lg{
  min-height: 1200px;
  margin: 0 auto;
}
.tiansjContainer-xl{
  min-height: 1200px;
  margin: 0 auto;
}
@media (max-width: 576px) {
  .tiansjContainer{
    width: 100%;
  }
  .tiansjContainer-sm{
    width: 100%;
  }
  .tiansjContainer-md{
    width: 100%;
  }
  .tiansjContainer-lg{
    width: 100%;
  }
  .tiansjContainer-xl{
    width: 100%;
  }
}
@media (min-width: 576px) {
  .tiansjContainer{
    width: 540px;
  }
  .tiansjContainer-sm{
    width: 540px;
  }
  .tiansjContainer-md{
    width: 100%;
  }
  .tiansjContainer-lg{
    width: 100%;
  }
  .tiansjContainer-xl{
    width: 100%;
  }
}

@media (min-width: 768px) {
  .tiansjContainer{
    width: 720px;
  }
  .tiansjContainer-sm{
    width: 720px;
  }
  .tiansjContainer-md{
    width: 720px;
  }
  .tiansjContainer-lg{
    width: 100%;
  }
  .tiansjContainer-xl{
    width: 100%;
  }
}

@media (min-width: 992px) {
  .tiansjContainer{
    width: 960px;
  }
  .tiansjContainer-sm{
    width: 960px;
  }
  .tiansjContainer-md{
    width: 960px;
  }
  .tiansjContainer-lg{
    width: 960px;
  }
  .tiansjContainer-xl{
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .tiansjContainer{
    width: 1140px;
  }
  .tiansjContainer-sm{
    width: 1140px;
  }
  .tiansjContainer-md{
    width: 1140px;
  }
  .tiansjContainer-lg{
    width: 1140px;
  }
  .tiansjContainer-xl{
    width: 1140px;
  }