css中的容器

css中的容器分为固定容器和流体容器。

流体容器：

　　图片宽度width一直为100%，容器的宽度随着margin, padding, border的出现，其可用宽度自动跟着减小，形成了自适应效果。就像放在容器中的水流一样，内容区域会随着margin, padding, border的出现自动填满剩余空间。

 

固定容器：

　　阈值                                                             width

大于等于1200(大屏pc)                               1170px + 槽宽(槽宽可变)

大于等于992小于1200(中屏pc)                    970 + 槽宽(槽宽可变)

大于等于768小于992(平板)　　                   750 + 槽宽(槽宽可变)

小于768(移动手机)                                       auto

实例：

利用媒体查询制作响应式布局

@media screen and (max- 768px) { //宽度小于768px的时候被应用  移动端
          .class { background: #ccc; }  }            

@media screen and (min- 768px) and (max- 992px) {  //宽度在 768px 和 992px 之间的时候被应用
          .class {  background: #333;  }   }

@media screen and (min- 992px) {//宽度大于 992px 的时候被应用 pc端
          .class {background: #666;}  }                                    
  

 注意：这三个媒体查询这样子排序有利于代码结构清晰。

CSS媒体查询的简介：

https://www.cnblogs.com/xiaohaodeboke/p/12536829.html

这三个媒体查询的顺序不能变

[Zhè sān gè méitǐ cháxún de shùnxù bùnéng biàn]

The order of these three media queries can not be changed