使用mediaquery自制栅格系统初探

清醒疯子 2018-04-08

html代码

<body>
    <div class="myContainer">
        <div class="myCol"><div class="content">内容1</div></div>
        <div class="myCol"><div class="content">内容2</div></div>
        <div class="myCol"><div class="content">内容3</div></div>
        <div class="myCol"><div class="content">内容4</div></div>
    </div>
<span>跟在后面的元素
</body>

css代码

/*box-sizing:border-box 可以实现width = content width + padidng 的效果,比默认的盒模型更加好用和直观*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*行容器*/
.myContainer{
    width: 100%;
    border: none;
    padding: 0;
    position: relative;
}

/*清除浮动*/
.myContainer:after{
    clear:both;
    display:block;
    content:""
}
/*列栅格*/
.myCol{
    width: 100%;
    padding-left:15px;
    padding-right:15px;
    position: relative;
    float:left
}
/*每一块栅格内容标出背景颜色方便区分*/
.content{
    background:#eeeeee
}
/*当屏幕宽度大于768px时*/
@media (min-width: 768px) {
    .myCol{
        width: 50%;
    }
}
/*当屏幕宽度大于992px时*/
@media (min-width: 992px) {
    .myCol{
        width: 33.33333333%;
    }
}
/*当屏幕宽度大于1200px时*/
@media (min-width: 1200px) {
    .myCol{
        width: 25%;
    }
}

相关推荐