快手的页面需要实现响应式布局，以适应不同设备的屏幕尺寸。请简述实现响应式布局的常用方法，并说明每种方法的优缺点。

答题要点

推荐答题框架：使用列举法，依次介绍常用方法、分析优缺点。关键要点：1. 媒体查询：通过 @media 规则根据不同屏幕尺寸应用不同的 CSS 样式。优点是灵活性高，能精确控制布局；缺点是代码量较大，维护成本高。2. 弹性布局：使用 flexbox 和 grid 布局，元素会根据容器大小自动调整。优点是简单易用，能快速实现响应式；缺点是对旧浏览器兼容性较差。3. 百分比布局：元素宽度使用百分比设置。优点是简单直观，适用于简单布局；缺点是在复杂布局中难以精确控制。示例思路：先介绍媒体查询，说明其能根据屏幕尺寸灵活调整样式，但代码维护较难。接着提到弹性布局，强调其简单易用但兼容性问题。最后说明百分比布局，指出其适合简单场景。