百度前端技术学院任务八：响应式网格（栅格化）布局

最新推荐文章于 2019-09-03 20:31:22 发布

梁远超

最新推荐文章于 2019-09-03 20:31:22 发布

阅读量1.1k

点赞数

分类专栏：百度前端技术学院作品文章标签：响应式网格前端百度技术

本文链接：https://blog.csdn.net/sinat_31515835/article/details/50904088

版权

百度前端技术学院作品专栏收录该内容

2 篇文章 0 订阅

订阅专栏

响应式网格（栅格化）布局

作者：梁远超

页面展示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>栅格系统</title>
        <link rel="stylesheet" type="text/css" href="css/css.css"/>
    </head>
    <body>
        <div id="Frame">
            <div class="col-sm-4 col-md-6" >
                <div class="box"></div>
            </div>
            <div class="col-sm-4 col-md-6">
                <div class="box"></div>
            </div>
            <div class="col-sm-4 col-md-12">
                <div class="box"></div>
            </div>
            <div class="col-sm-3 col-md-3">
                <div class="box"></div>
            </div>
            <div class="col-sm-6 col-md-6">
                <div class="box"></div>
            </div>
            <div class="col-sm-3 col-md-3">
                <div class="box"></div>
            </div>
            <div class="col-sm-1 col-md-2">
                <div class="box"></div>
            </div>
            <div class="col-sm-1 col-md-2">
                <div class="box"></div>
            </div>
            <div class="col-sm-2 col-md-8">
                <div class="box"></div>
            </div>
            <div class="col-sm-2 col-md-3">
                <div class="box"></div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="box"></div>     
            </div>  
        </div>
    </body>
</html>

body{
    margin: 0px;
    width: 100%;
}
#Frame{
    padding: 10px;/*使内部方块与浏览器之间的距离为20px*/
}
[class*="col-"]{
    box-sizing: border-box;
    padding: 10px;/*使内部方块之间的距离为20px*/
    float: left;

}
.box{
    background-color: #eee;
    border: 1px solid #999;
    height: 48px;
}

/*width大于768px时*/
@media only screen and (min-width: 769px){
    .col-sm-6{
        width:50%;
    }
    .col-sm-4{
        width:33.33%;
    }

    .col-sm-3{
        width: 25%;
    }
    .col-sm-2{
        width: 16.66%;
    }
    .col-sm-1{
        width: 8.33%;
    }
}

/*width大于768px时*/
@media only screen and (max-width: 768px){
    .col-md-12{
        width: 100%;
    }
    .col-md-8{
        width: 66.66%;
    }
    .col-md-6{
        width:50%;
    }
    .col-md-3{
        width: 25%;
    }
    .col-md-2{
        width: 16.66%;
    }
}

梁远超

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度前端技术学院任务八：响应式网格（栅格化）布局

响应式网格（栅格化）布局作者：梁远超页面展示<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>栅格系统</title> <link rel="stylesheet" type="text/css" href="css/css.css"/> </head>
复制链接

扫一扫