响应式栅栏布局

时间 2019-12-08

标签响应栅栏布局繁體版

原文原文链接

任务八 : 响应式网格(栅格化)布局

目标:实现效果如图

知识点

CSS3 属性 box-sizing 的使用: 当元素的宽度、高度肯定时, { box-sizing : border-box }将元素的padding, border都将在设定的高度和宽度内绘制;也就是说,不管你的padding和border如何变化,它都不会超出预先设定好的宽度和高度.css
清楚浮动防止高度塌陷: 设外层元素为container, 内层为content,应用了float属性的内层元素content高度一旦超过container,container就没法彻底包裹content,就形成了高度塌陷.解决办法:父级元素应用::after选择器.

.container: after {
            content: " ";
            display: table;
            clear: both;
        }

CSS3属性: @media主要用于为不一样设备提供不一样的属性, 参考文档: CSS|MDN、
CSS3 media querise;
***

本次练习代码示例:html

index.html文件:segmentfault

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./public/index.css">
    <title></title>
</head>
<body>
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="content"></div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="content"></div>
        </div>
        <div class="col-md-4 col-sm-12">
            <div class="content"></div>
        </div>
        <div class="col-md-3 col-sm-3">
            <div class="content"></div>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="content"></div>
        </div>
        <div class="col-md-3 col-sm-3">
            <div class="content"></div>
        </div>
        <div class="col-md-1 col-sm-2">
            <div class="content"></div>
        </div>
        <div class="col-md-1 col-sm-2">
            <div class="content"></div>
        </div>
        <div class="col-md-2 col-sm-8">
            <div class="content"></div>
        </div>
        <div class="col-md-2 col-sm-3">
            <div class="content"></div>
        </div>
        <div class="col-md-6 col-sm-3">
            <div class="content"></div>
        </div>
    </div>
</body>
</html>

master.css文件布局

* {
    box-sizing: border-box;
}

[class*= 'col-'] {
    float: left;
    height: 70px;
    padding: 10px;
}

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

@media only screen and (min-width: 768.1px) {
    .col-md-1 {
        width: 8.333%;
    }
    .col-md-2 {
        width: 16.666%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.333%;
    }
    .col-md-5 {
        width: 41.666%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-8 {
        width: 66.666%;
    }
    .col-md-12 {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .col-sm-1 {
        width: 8.333%;
    }
    .col-sm-2 {
        width: 16.666%;
    }
    .col-sm-3 {
        width: 25%;
    }
    .col-sm-4 {
        width: 33.333%;
    }
    .col-sm-5 {
        width: 41.666%;
    }
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-8 {
        width: 66.666%;
    }
    .col-sm-12 {
        width: 100%;
    }
}

.row:after {
    display: table;
    content: " ";
    clear: both;
}

(若有错漏欢迎指正);code