CSS中媒体宽度等于的概念在响应式设计中非常重要。通过设置媒体查询，我们可以根据设备屏幕的宽度来调整网站的样式和布局。

@media screen and (max-width: 768px) {
/* 以768像素为界限的媒体查询 */
body {
font-size: 14px;
}
}

在上面的例子中，我们设置了一个最大宽度为768像素的媒体查询。当设备的屏幕宽度小于或等于768像素时，所有应用了该查询的样式都会被应用。

在响应式设计中，通常会使用多个媒体查询来优化设计。例如，你可以设置一个查询来在大屏幕上显示更多内容，另一个查询来在小屏幕上以单列显示内容。

@media screen and (min-width: 992px) {
/* 大屏幕 */
.container {
max-width: 960px;
}
}
@media screen and (max-width: 768px) {
/* 小屏幕 */
.container {
width: 100%;
padding: 0 20px;
}
}

在上面的例子中，我们设置了一个最小宽度为992像素的查询，该查询将样式应用于大屏幕设备。我们还设置了一个最大宽度为768像素的查询，该查询将样式应用于小屏幕设备。这些查询根据设备的屏幕宽度来调整网站的布局。

总的来说，使用媒体查询可以大大提高网站的响应速度和用户体验。通过针对不同的设备设置不同的样式和布局，我们可以更好地适应不同的用户，从而提高网站的可用性和可访问性。