什么是响应式设计？

响应式设计是一种网页设计方法，旨在使网页能够在各种设备和屏幕尺寸上良好地显示。这包括桌面电脑、平板电脑和智能手机等。

为什么需要响应式设计？

随着移动互联网的普及，越来越多的用户通过移动设备访问网页。如果网页不能在移动设备上良好地显示，用户体验将会大打折扣。因此，响应式设计成为了现代网页设计的必备技能。

如何使用CSS实现响应式设计？

实现响应式设计的主要工具是CSS中的媒体查询（Media Queries）。媒体查询允许我们根据不同的屏幕尺寸和分辨率应用不同的CSS样式。

案例讲解：实现一个简单的响应式布局

下面是一个简单的示例，展示了如何使用媒体查询实现响应式布局。

/* 默认样式 */
.container {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
}

/* 当屏幕宽度小于768px时 */
@media(max-width: 768px) {
    .container {
        width: 100%;
    }
}

/* 当屏幕宽度小于480px时 */
@media(max-width: 480px) {
    .demo img {
        width: 100%;
    }
}

                

在上面的示例中，我们定义了一个.container类，其默认宽度为80%。然后，我们使用媒体查询，当屏幕宽度小于768px时，将.container的宽度设置为100%。当屏幕宽度小于480px时，我们将.demo中的图片宽度设置为100%。这样，无论用户使用的是哪种设备，网页都能够良好地显示。