请描述一下如何使用 CSS 实现一个简单的响应式布局。

答题要点

推荐答题框架：按照思路步骤进行阐述，先说明整体思路，再具体介绍方法。关键要点如下：1. 媒体查询：利用 `@media` 规则，根据不同的屏幕尺寸应用不同的 CSS 样式。2. 弹性布局：使用 `flexbox` 或 `grid` 布局，使元素能够自适应屏幕大小。3. 相对单位：使用 `em`、`rem`、`%` 等相对单位，而不是固定的像素值，确保元素大小随屏幕变化。4. 视口单位：如 `vw`、`vh` 等，根据视口大小进行布局。示例思路：首先，使用媒体查询根据不同屏幕宽度设置不同的样式。其次，采用弹性布局让元素自适应。然后，使用相对单位来确定元素大小。最后，结合视口单位进行更精准的布局。例如，对于一个导航栏，在小屏幕上可以显示为垂直排列，大屏幕上为水平排列。