CSS之自定义栅格系统

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：中屏幕

2：小屏幕

CSS之自定义栅格系统

1：一些规范

2： 代码

3：效果

猜你喜欢

2：代码