响应式布局-媒体查询父级布局容器
1.响应式布局容器
父局作为布局容器，配合自己元素实现变化效果，原理：在不通过屏幕下面吗，通过媒体查询来改变子元素的排列方式和大小，从而实现不同尺寸屏幕下看到不同的效果。
2.响应尺寸布局容器常见宽度划分
手机-小于768px 宽度设置100%；
平板-大于等于768px 设置宽度为750px
桌面显示器-大于等于992px 设置宽度 970px
大屏幕显示器-大于等于1200px 宽度设置为 1170px;
设置宽度比屏幕尺寸小，留取左右空白居中对齐；
3.媒体查询检测屏幕尺寸应用样式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.content {height: 400px;background-color: red;margin: 0 auto;}/* 手机-小于768px 宽度设置100%；*/@media screen and (max-width:767px) {.content {width: 100%;}}/* 平板-大于等于768px 设置宽度为750px */@media screen and (min-width:768px) {.content {width: 750px;}}/* 桌面显示器-大于等于992px 设置宽度 970px */@media screen and (min-width:992px) {.content {width: 970px;}}/* 大屏幕显示器-大于等于1200px 宽度设置为 1170px; */@media screen and (min-width:1200px) {.content {width: 1170px;}}</style>
</head><body><div class="content"></div>
</body></html>
3.总结
核心的实现方法 根据媒体查询不同的屏幕尺寸大小来应用不同的css来实现不同的尺寸下屏幕的显示。