请说明如何实现一个简单的响应式布局，有哪些常用的方法？

答题要点

实现简单的响应式布局有多种常用方法。一种是使用媒体查询，通过 @media 规则根据不同的屏幕宽度应用不同的 CSS 样式。例如，可以设置当屏幕宽度小于 768px 时，元素的宽度变为 100%，实现移动端的自适应布局。另一种方法是使用弹性布局（Flexbox），它可以方便地实现元素的水平和垂直对齐，并且能根据容器的大小自动调整元素的大小。例如，使用 display: flex 和 justify-content、align-items 等属性来控制元素的排列方式。还有网格布局（Grid），它提供了更强大的二维布局能力，可以将页面划分为多个网格区域，然后将元素放置在这些区域中。通过设置 grid-template-columns 和 grid-template-rows 等属性，可以灵活地定义网格的结构。此外，还可以使用百分比布局，将元素的宽度或高度设置为百分比值，使其根据父元素的大小自动调整。综合运用这些方法，可以实现一个适应不同屏幕尺寸的响应式布局。