面试题：CSS媒体查询@media规则在复杂响应式布局中的运用

Question

假设你正在开发一个多栏布局的网页，在桌面端是三栏布局，平板端是两栏布局，手机端是单栏布局。请使用@media规则编写相应的CSS代码实现这个响应式布局，同时要保证各栏之间的间距在不同设备上合理适配。

Answer 1

/* 桌面端三栏布局 */
@media (min - width: 992px) {
  .container {
        display: flex;
    }
  .col {
        flex: 1;
        padding: 15px;
        margin: 0 10px;
    }
}

/* 平板端两栏布局 */
@media (min - width: 768px) and (max - width: 991px) {
  .container {
        display: flex;
        flex - direction: column;
    }
  .col {
        flex: 1;
        padding: 15px;
        margin: 10px 0;
    }
}

/* 手机端单栏布局 */
@media (max - width: 767px) {
  .container {
        display: flex;
        flex - direction: column;
    }
  .col {
        flex: 1;
        padding: 15px;
        margin: 10px 0;
    }
}

在上述代码中：

1. 当屏幕宽度大于等于992px（桌面端）时，使用flex布局实现三栏，每栏间距左右10px 。
2. 当屏幕宽度在768px到991px之间（平板端）时，使用flex布局且方向为列，实现两栏，每栏间距上下10px 。
3. 当屏幕宽度小于等于767px（手机端）时，同样使用flex布局且方向为列，实现单栏，每栏间距上下10px 。

假设HTML结构类似如下：

<div class="container">
    <div class="col">栏1</div>
    <div class="col">栏2</div>
    <div class="col">栏3</div>
</div>