实现响应式布局

使用 CSS 媒体查询：CSS 媒体查询允许根据设备的特征，如宽度、高度、屏幕方向等，为不同的设备提供不同的样式。通过设置断点，可以在不同的屏幕尺寸之间切换样式

实现方式如下：

/* 在 CSS 中使用媒体查询 */
@media screen and (max-width: 768px) {
    /* 在小屏幕下的样式 */
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* 在中等屏幕下的样式 */
}

@media screen and (min-width: 1025px) {
    /* 在大屏幕下的样式 */
}

屏幕拉伸到最大的情况下的效果

屏幕缩小的情况下的效果

CSS3 媒体查询在实现响应式布局方面具有以下几个好处：

1. 适应不同设备和屏幕尺寸：通过使用 CSS3 媒体查询，可以根据设备的特性（如宽度、高度、屏幕方向等）来应用不同的样式，从而使网页在各种设备上都能良好地展示。无论是桌面电脑、平板电脑还是手机，都可以在不同的屏幕尺寸下呈现最佳的布局和用户体验。

2. 提升网页加载速度：媒体查询可以根据设备的特性选择性地加载适用于该设备的样式，避免了加载不必要的样式和资源，从而减少了网页的加载时间，提升了网页的性能和用户体验。

3. 灵活调整布局：通过设置不同的媒体查询断点，可以针对不同的屏幕尺寸和设备特性调整元素的大小、位置、显示与隐藏等属性，以适应不同的布局需求。这样可以确保网页在不同设备上的可读性和可用性。