CSS之自定义栅格系统

港控/mmm° 2022-05-16 03:19 228阅读 0赞

### 1：一些规范 ###

> .col-xs-\* 超小屏幕 手机 (<768px)
> 
> .col-sm-\* 小屏幕 平板 (≥768px)
> 
> .col-md-\* 中等屏幕 桌面显示器 (≥992px)
> 
> .col-lg-\* 大屏幕 大桌面显示器 (≥1200px)

### 2： 代码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自定义栅格系统</title>
        <style>
            .container{
                width: 100%;
            }
            .row{
                width: 100%;
            }
            /*中等屏幕*/
            .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6{
                float: left;
            }
            /*小屏幕*/
            .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6{
                float: left;
            }
    
            /*小屏幕*/
            .col-sm-1{
                width: 16.6666666666%;
            }
            .col-sm-2{
                width: 33.3333333332%;
            }
            .col-sm-3{
                width: 49.9999999998%;
            }
            .col-sm-4{
                width: 66.6666666664%;
            }
            .col-sm-5{
                width: 83.3333333333%;
            }
            .col-sm-6{
                width: 100%;
            }
    
            /*中等屏幕*/
            @media (min-width: 768px) {
                .col-md-1{
                    width: 16.6666666666%;
                }
                .col-md-2{
                    width: 33.3333333332%;
                }
                .col-md-3{
                    width: 49.9999999998%;
                }
                .col-md-4{
                    width: 66.6666666664%;
                }
                .col-md-5{
                    width: 83.3333333333%;
                }
                .col-md-6{
                    width: 100%;
                }
            }
    
        </style>
    </head>
    <body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-1">col-md-3</div>
            <div class="col-md-3 col-sm-5">col-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-2 col-sm-1">col-md-2</div>
            <div class="col-md-2 col-sm-2">col-md-2</div>
            <div class="col-md-2 col-sm-3">col-md-2</div>
        </div>
    </div>
    
    
    </body>
    </html>

### 3：效果 ###

**1：中屏幕**

![70][]

**2：小屏幕**

![70 1][]

[70]: /images/20220516/8805fb3783d449cc89eef47f0444a91e.png
[70 1]: /images/20220516/8518b2f15947456592ec2cdac9be8223.png