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