使用media实现响应式布局

前端开发人员在写页面时，可能会遇到以下情况：页面是在自己电脑上调试的，在自己电脑桌面展示是正常的，但是运行到别人的电脑上，自己布局的长宽会不同，页面会呈现出不同的展示效果，看着不是很美观。我们可以使用media来实现响应式布局，来解决这个问题。

我在项目开发时，需求是轮播图和课程的div宽度一致，效果如图：

 1.在轮播图卡片、课程模块的div上绑定样式类：

 

2.在css标签中实现响应式布局：

@media screen and (max-width:1560px) {
  .mediaAdaptation{
    max-width: 1100px;
    margin: 80px auto;
  }
  .carouselImg{
    max-width: 1100px;
    margin: 0 auto;
  }
}
@media screen and (min-width:1560px) and (max-width:2090px) {
  .mediaAdaptation {
    max-width: 1350px;
    margin: 80px auto;
  }
  .carouselImg{
    max-width: 1350px;
    margin: 0 auto;
  }
}
  @media screen and (min-width: 2090px) {
    .mediaAdaptation {
      max-width: 1700px;
      margin: 80px auto;
    }
    .carouselImg{
      max-width: 1700px;
      margin: 0 auto;
    }
}