css 响应式 三列布局

CSS响应式设计指的是在不同分辨率下，网站能够根据设备大小自动排版的设计。在CSS中，响应式设计通常用于三列布局，这种布局可以让网站的页面自适应不同设备大小，从而提高了用户体验。

    .container {
        display: flex;
        flex-wrap: wrap;
    }

    .col-1,.col-2,.col-3 {
        Box-sizing: border-Box;
        padding: 10px;
    }

    .col-1 {
        flex-basis: 100%;
    }

    @media screen and (min-width: 600px) {
        .col-1 {
            flex: 1;
        }
        .col-2 {
            flex: 1;
        }
        .col-3 {
            flex: 1;
        }
    }

    @media screen and (min-width: 900px) {
        .col-1 {
            flex: 2;
        }
        .col-2 {
            flex: 1;
        }
        .col-3 {
            flex: 1;
        }
    }

上述代码实现的是一个简单的三列布局，其中的.container是一个包裹块，.col-1、.col-2、.col-3则表示三个子块。在不同宽度的屏幕下，子块的宽度会发生变化，从而实现页面自适应。

总的来说，CSS响应式设计的三列布局是一个重要的网页布局方式，它可以帮助网站在不同设备上得到更好的展示效果，提高用户体验。因此，网页设计师应该熟练掌握它的相关知识和技术。