要使用CSS制作响应式布局，需要使用媒体查询来根据设备的屏幕大小和方向来应用不同的样式。以下是一些步骤：
媒体查询是CSS的一种技术，可根据设备的屏幕大小和方向等特性来应用不同的样式。以下是一些示例：
@media screen and (max-width: 768px) {
body {
background-color: yellow;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
body {
background-color: blue;
}
}
@media screen and (min-width: 1024px) {
body {
background-color: green;
}
}
@media screen and (max-width: 768px) {
.sidebar {
display: none;
}
}
这将在视口小于768像素时隐藏具有类“sidebar”的元素。
@media screen and (max-width: 768px) {
.content {
width: 100%;
margin-left: 0;
}
}
@media screen and (min-width: 768px) {
.content {
width: 70%;
margin-left: 30%;
}
}
这将在视口小于768像素时将具有类“content”的元素的宽度更改为100％，并将左边距更改为0。 在视口大于等于768像素时，它将将宽度更改为70％，并将左边距更改为30％。