使用mediaquery自制栅格系统初探-优快云博客

本文介绍了一种使用HTML和CSS实现响应式布局的方法，通过不同屏幕尺寸下的列宽调整，实现内容的良好展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>跟在后面的元素</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%;
    }
}

转载于:https://www.cnblogs.com/kianyin/p/8745429.html