实现响应式布局需要使用 CSS3 的 @media 查询。 @media 查询允许我们针对不同的媒体类型定义不同的样式。
关键词：
为了实现响应式布局，可以使用以下方法：
使用相对单位（如百分比）来定义布局和样式，使页面可以自适应不同的屏幕大小。例如：
.container {
width: 80%; /* 相对于父元素的百分比 */
margin: 0 auto; /* 居中 */
}
.box {
width: 50%; /* 相对于父元素的百分比 */
float: left; /* 浮动 */
}使用 @media 查询来定义不同的样式，根据不同的屏幕大小和分辨率来应用不同的样式。例如：
/* 对于屏幕宽度小于 768px 的设备，应用以下样式 */
@media (max-width: 767px) {
.container {
width: 100%; /* 宽度为 100% */
padding: 0 10px; /* 左右边距为 10px */
}
.box {
width: 100%; /* 宽度为 100% */
}
}
/* 对于屏幕宽度大于等于 768px 但小于 992px 的设备，应用以下样式 */
@media (min-width: 768px) and (max-width: 991px) {
.container {
width: 90%; /* 宽度为 90% */
padding: 0 20px; /* 左右边距为 20px */
}
.box {
width: 50%; /* 宽度为 50% */
}
}
/* 对于屏幕宽度大于等于 992px 的设备，应用以下样式 */
@media (min-width: 992px) {
.container {
width: 80%; /* 宽度为 80% */
padding: 0 30px; /* 左右边距为 30px */
}
.box {
width: 33.33%; /* 宽度为 33.33% */
}
}使用 flexbox 或 grid 布局来实现自适应布局，具有更好的可控性。例如：
/* 使用 flexbox 布局 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
flex-basis: 50%; /* 宽度为 50% */
}
/* 使用 grid 布局 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 列数自适应 */
grid-gap: 20px; /* 间距为 20px */
}通过以上方法，可以实现响应式布局，并适应各种设备。