就是使用媒体查询针对不同的宽度的设备进行布局和样式的设置，从而适配不同设备的目的。在响应式开发中将设备划分成以下4个挡位。
响应式需要一个父级作为布局容器来配合子元素实现变化效果。
原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式的变化。 布局容器的宽度应该都是固定的。
<body>
<!-- 响应式开发里，首先需要一个布局容器 -->
<div class="container">
</div>
</body><style>
.container {
height: 150px;
background-color: pink;
margin: 0 auto;
}
/* 1.超小屏幕（手机，<768px）,布局容器设置宽度为100% */
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
}
/* 2. 小屏幕（平板，>=768px）,设置宽度为750px */
@media screen and (min-width: 768px) {
.container {
width: 750px;
}
}
/* 3.中等屏幕（桌面显示器，>=992px）,设置宽度为970px */
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
/* 4.大屏幕（大桌面显示器，>=1200px）,设置宽度为1170px */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
</style>思路：
<body>
<div class="container">
<ul>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
<li>导航栏</li>
</ul>
</div>
</body><style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container {
width: 750px;
margin: 0 auto;
}
.container ul li {
float: left;
width: 93.75px;
height: 30px;
background-color: green;
}
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
.container ul li {
width: 33.33%;
}
}
</style>原文：https://www.cnblogs.com/deer-cen/p/12156461.html