响应式ContainerCSS设计

最新推荐文章于 2025-10-18 19:53:10 发布

原创最新推荐文章于 2025-10-18 19:53:10 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

前端专栏收录该内容

2 篇文章

订阅专栏

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

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